Michael/PleinR
1
0 Fork 0
mirror of https://github.com/R0m1k3/PleinR.git synced 2026-10-17 20:27:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

Anime la page d'accueil : apparitions au défilement + étoiles en mouvement

Browse Source 
- Composant Reveal (IntersectionObserver) + keyframes CSS : sections et grilles
  apparaissent en fondu/glissement, cartes en cascade (stagger). Respecte
  prefers-reduced-motion + repli no-JS.
- Étoiles (sparkles) : l'animation twinkle inclut désormais une dérive
  (translation) pour un mouvement nettement visible.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XwfhYHzC9hQWPDnQ2p53GL
This commit is contained in:
Claude committed 2026-06-26 22:09:43 +00:00
1 parent 9c4bdbe09d
commit e2cf03c9f3
4 files changed
+150 -34
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/globals.css
+63 -5
View File
@@ -58,15 +58,26 @@ button {
/* ---- Animations ---- */
@keyframes plr-twinkle {
0%,
100% {
transform: scale(0.85) rotate(0deg);
opacity: 0.5;
0% {
transform: translate(0, 0) scale(0.9) rotate(0deg);
opacity: 0.55;
}
25% {
transform: translate(4px, -9px) scale(1.15) rotate(15deg);
opacity: 1;
}
50% {
transform: scale(1.3) rotate(25deg);
transform: translate(-3px, -13px) scale(1.32) rotate(26deg);
opacity: 0.85;
}
75% {
transform: translate(-5px, -5px) scale(1.1) rotate(12deg);
opacity: 1;
}
100% {
transform: translate(0, 0) scale(0.9) rotate(0deg);
opacity: 0.55;
}
}
@keyframes plr-floatlogo {
0%,
@@ -86,6 +97,53 @@ button {
.sparkle {
clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
/* ---- Scroll-reveal entrance animations ---- */
@keyframes plr-fade-up {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: none;
}
}
.reveal {
opacity: 0;
}
.reveal.is-visible {
animation: plr-fade-up 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
/* Staggered children (grids) */
.reveal-stagger > * {
opacity: 0;
}
.reveal-stagger.is-visible > * {
animation: plr-fade-up 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.reveal-stagger.is-visible > *:nth-child(1) { animation-delay: 0.04s; }
.reveal-stagger.is-visible > *:nth-child(2) { animation-delay: 0.1s; }
.reveal-stagger.is-visible > *:nth-child(3) { animation-delay: 0.16s; }
.reveal-stagger.is-visible > *:nth-child(4) { animation-delay: 0.22s; }
.reveal-stagger.is-visible > *:nth-child(5) { animation-delay: 0.28s; }
.reveal-stagger.is-visible > *:nth-child(6) { animation-delay: 0.34s; }
.reveal-stagger.is-visible > *:nth-child(7) { animation-delay: 0.4s; }
.reveal-stagger.is-visible > *:nth-child(8) { animation-delay: 0.46s; }
.reveal-stagger.is-visible > *:nth-child(n + 9) { animation-delay: 0.52s; }
@media (prefers-reduced-motion: reduce) {
.reveal,
.reveal-stagger > * {
opacity: 1 !important;
}
.reveal.is-visible,
.reveal-stagger.is-visible > * {
animation: none !important;
}
}
.twinkle {
animation: plr-twinkle 3.2s ease-in-out infinite;
}