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 pendant qu'elle entre dans l'écran (animation-range: entry 0% entry 100%).
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
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.