Faites défiler la page. Toutes les animations de cette démo sont faites en CSS seulement, avec animation-timeline. Ouvrez l'inspecteur pour lire le code : il est commenté.
⚠️ Votre navigateur ne supporte pas encore les animations pilotées par le défilement. Le contenu s'affiche normalement, sans animation. Essayez dans Chrome, Edge ou Safari récent.
La barre rouge en haut de l'écran grandit à mesure qu'on descend dans la page. Sa timeline, c'est le défilement de toute la page : animation-timeline: scroll().
Chaque carte a sa propre timeline : sa visibilité dans l'écran, avec animation-timeline: view(). Elle apparaît une fois entièrement entrée dans l'écran, sur une courte distance de défilement : animation-range: contain 0% contain 40%. Avec entry 0% entry 100%, l'apparition se ferait plutôt pendant que la carte entre, dès qu'on en voit le premier pixel : plus discret.
Le bloc s'ouvre du centre vers les côtés, grâce à clip-path animé sur une plage précise : entry 20% cover 50%.
Le grand texte se déplace horizontalement pendant que la section traverse l'écran.
PORTFOLIO · WEB 5 · PORTFOLIO
Le texte défile normalement. Derrière, deux couches d'arrière-plan se déplacent dans le même sens que le défilement : elles semblent plus lentes, donc plus loin. Devant, une troisième couche file en sens inverse, plus vite que le texte : elle semble plus proche. Trois vitesses, trois profondeurs.
Tout est enveloppé dans @supports (animation-timeline: scroll()) et @media (prefers-reduced-motion: no-preference). Sans support, ou si la personne a demandé moins de mouvement dans son système, le contenu reste simplement visible, sans animation.