Apparition au scroll, barre de progression de lecture, parallaxe et récit sticky, chacun réalisé de trois façons : animations CSS scroll-driven, IntersectionObserver et GSAP ScrollTrigger.
Les animations au scroll déclenchent des effets quand un contenu entre dans le champ de vision ou pendant le défilement de la page. Le CSS moderne relie les keyframes au défilement avec animation-timeline: view() ou scroll(), sans script là où c'est pris en charge. IntersectionObserver en JavaScript déclenche des classes d'apparition partout, et GSAP ScrollTrigger gère l'épinglage et les timelines synchronisées au défilement. Respectez toujours prefers-reduced-motion.
Choisir une approche
Les quatre effets les plus demandés, l'apparition au scroll, la barre de progression de lecture, la parallaxe et le récit sticky, sont chacun présentés en CSS pur, en JavaScript simple avec IntersectionObserver et avec GSAP ScrollTrigger. Les versions CSS tournent en direct dans des cadres défilants, et la version observer fonctionne comme démo réelle directement sur cette page.
Cette propriété lie la progression d'une animation au défilement plutôt qu'au temps. scroll() suit la distance parcourue dans un conteneur défilant, du haut vers le bas. view() suit le trajet d'un élément dans la zone visible, de sorte que les keyframes se déroulent à son entrée et à sa sortie.
Chrome et Edge depuis la version 115, et Safari depuis la version 26. Firefox propose la fonctionnalité derrière une préférence plutôt qu'activée par défaut, vérifiez donc caniuse avant de vous y fier, et prévoyez toujours une solution de repli.
Pour savoir quand un élément entre dans le champ de vision ou en sort, oui. Le navigateur calcule les intersections de façon asynchrone et ne vous appelle qu'en cas de changement, alors qu'un écouteur de scroll s'exécute de nombreuses fois par seconde et incite à des lectures de layout qui provoquent des saccades.
Pas pour de simples apparitions ou une barre de progression. GSAP ScrollTrigger se justifie pour les sections épinglées, les timelines à plusieurs étapes synchronisées au défilement, le magnétisme et les effets qui doivent se comporter de la même façon dans tous les navigateurs dès aujourd'hui.
Dans une media query prefers-reduced-motion: reduce, affichez le contenu dans son état final et supprimez la parallaxe et les grands mouvements. En JavaScript, vérifiez la même requête avec window.matchMedia avant de créer les animations. De légers fondus d'opacité sont généralement acceptables.
Chaque cadre défile indépendamment. Dans un navigateur sans animation-timeline, la garde @supports laisse tout visible et immobile.
Chaque carte apparaît en fondu et monte en entrant dans le viewport. animation-range limite l'effet à la phase d'entrée.
scroll(root) suit le défilement du document. La barre passe de 0 à toute la largeur sans aucun écouteur.
Le calque intérieur se déplace plus lentement que la page pendant que son conteneur traverse le viewport. Désactivé en mouvement réduit.
L'image reste épinglée avec position: sticky tandis que chaque étape s'éclaire en traversant le milieu du cadre.
La démo en direct près du haut de cette page utilise ce même modèle en React. Ces versions fonctionnent avec n'importe quel framework, ou sans framework.
Les cartes ne sont masquées au départ qu'une fois le script exécuté, grâce à une classe ajoutée d'abord sur html, si bien qu'un script en échec les laisse visibles.
La progression nécessite la position de défilement exacte, cette version utilise donc un écouteur de scroll passif limité à une image.
Une fine bande d'observation au milieu de l'écran marque comme active l'étape qui la traverse.
Code uniquement. ScrollTrigger est un plugin GSAP ; tous deux sont gratuits sous la propre licence de GSAP, que vous devriez lire avant de mettre en production.
gsap.matchMedia n'exécute la configuration que si le lecteur n'a pas demandé de mouvement réduit, et l'annule si le réglage change.
Faites défiler la zone. Les cartes apparaissent une seule fois, la barre suit la progression, le calque rayé se déplace plus lentement que le contenu, et le panneau épinglé suit l'étape qui traverse le milieu.
Le mouvement réduit est activé, les cartes apparaissent donc sans mouvement et la parallaxe est désactivée.
Progression du défilement dans la démo
Zone de démo défilante
Commencez à faire défiler.
Calque de parallaxe
Commencer gratuitement · Sans carte bancaire