Animation au scroll : 7 exemples et comment les ajouter à votre site

Une animation au scroll est un effet qui se déclenche ou progresse quand le visiteur fait défiler la page : un bloc qui apparaît, une barre de lecture qui se remplit, un fond qui bouge moins vite que le texte. Bien dosée, elle guide le regard vers ce qui compte. Mal dosée, elle ralentit le site et gêne une partie des visiteurs. On l’obtient de trois façons : en CSS natif, avec une bibliothèque JavaScript comme GSAP, ou sans coder grâce à une extension WordPress.

Animation scroll : de quoi parle-t-on exactement ?

Le scroll, ou défilement, est le geste qui fait monter ou descendre le contenu d’une page, à la molette, au doigt ou au clavier. Une animation au scroll relie un mouvement à ce geste. Il en existe deux familles, que la spécification CSS distingue clairement :

• L’animation déclenchée par l’arrivée d’un élément : elle se lance quand un bloc entre dans la partie visible de l’écran, puis se termine. C’est l’effet « apparition » des sites vitrines.
• L’animation liée à la progression du défilement : elle avance et recule avec le scroll, comme si la barre de défilement tenait la télécommande. Une barre de progression de lecture en est l’exemple le plus simple.

Cette distinction compte quand vous briefez un prestataire : demander « une animation au scroll » ne dit pas laquelle des deux vous voulez, ni combien de temps il faudra pour la réaliser.

7 exemples d’animations au scroll, et quand les utiliser

Voici les effets que l’on rencontre le plus souvent, classés du plus discret au plus ambitieux. Pour chacun : ce que voit le visiteur, à quoi il sert, et comment l’obtenir.

Apparition des blocs au défilement

Les textes et images glissent légèrement et passent de transparents à visibles quand ils arrivent à l’écran. C’est l’effet le plus répandu, et le plus facile à obtenir : la plupart des constructeurs de pages WordPress le proposent dans les réglages d’un bloc. Gardez-le court et réservez-le aux éléments secondaires. Un titre principal ou un bouton d’action ne doit jamais attendre la fin d’une animation pour être lisible.

Barre de progression de lecture

Une fine barre en haut de l’écran se remplit à mesure que le lecteur avance dans un article. Elle indique la longueur restante sans un mot. C’est l’exemple type de ce que le CSS natif sait faire seul, sans JavaScript, avec la fonction scroll(). Utile sur un blog ou une page de documentation longue.

Effet parallaxe

L’arrière-plan défile moins vite que le premier plan, ce qui crée une impression de profondeur. L’effet parallaxe fonctionne sur une page d’accueil ou une page de présentation d’un lieu (hôtel, restaurant, domaine). Il fatigue sur une page qu’on lit longtemps, et il fait partie des mouvements qui gênent le plus les personnes sensibles au mouvement.

En-tête qui se réduit ou se masque

Le menu du haut rétrécit dès que l’on descend, ou disparaît puis revient quand on remonte. L’intérêt est concret sur mobile : le contenu gagne de la place à l’écran sans que le menu devienne introuvable. C’est l’une des animations au scroll les plus utiles pour un site de petite entreprise.

Ligne ou tracé qui se dessine

Un trait relie les sections et se dessine au fil du défilement. Il conduit l’œil de haut en bas, par exemple le long des étapes d’une prestation ou d’une chronologie. L’effet repose en général sur une image vectorielle (SVG), un format d’image dessiné par le code et non en pixels, animée en CSS ou en JavaScript.

Séquence d’images pilotée par le défilement

Un produit tourne sur lui-même ou se démonte pièce par pièce à mesure que l’on fait défiler. Il s’agit en fait d’une série de photos affichées l’une après l’autre, comme un folioscope. Sur WordPress, l’extension Scrollsequence est conçue pour cet usage : elle anime une séquence d’images contrôlée par la molette ou le toucher. Comptez un vrai travail de prise de vue en amont, et un poids de page plus élevé.

Section épinglée qui raconte une histoire

Un bloc reste fixe à l’écran pendant que son contenu change au fil du scroll : trois étapes d’un service, un avant et après, un schéma qui se complète. C’est la spécialité de ScrollTrigger, le module de défilement de la bibliothèque GSAP, qui sait épingler une section et faire avancer une animation avec la barre de défilement. C’est l’effet le plus spectaculaire, et le plus coûteux en développement.

Comment créer une animation au scroll : trois méthodes comparées

Le choix dépend de deux choses : qui intervient sur votre site, et la complexité de l’effet voulu. Le tableau ci-dessous résume les options.

Le CSS natif : sans JavaScript

Le CSS, le langage qui gère l’apparence d’une page, sait désormais relier une animation au défilement grâce à la propriété animation-timeline. La fonction scroll() suit la progression du défilement, la fonction view() suit l’entrée d’un élément à l’écran. Voici une apparition au scroll complète, qui ne s’active que si le navigateur la comprend et si le visiteur n’a pas demandé à limiter les animations :

@keyframes apparition {
  from { opacity: 0; transform: translateY(2rem); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .apparait {
      animation: apparition linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
  }
}

Le point de vigilance est la compatibilité. En septembre 2026, la page de la documentation de référence MDN consacrée à la fonction scroll() indiquait que celle-ci ne fonctionnait pas encore dans certains des navigateurs les plus utilisés. La règle @supports du code ci-dessus règle le problème : sur un navigateur qui ne connaît pas la fonction, le bloc s’affiche simplement sans animation. Vérifiez le tableau de compatibilité de MDN au moment de votre projet.

Les bibliothèques JavaScript : GSAP et AOS

Une bibliothèque est un ensemble de code prêt à l’emploi que l’on ajoute au site. AOS sert surtout aux apparitions : on ajoute un attribut au bloc HTML, par exemple data-aos="fade-up", et l’effet est en place. GSAP va beaucoup plus loin. Son éditeur, désormais rattaché à Webflow, annonce que la bibliothèque est gratuite pour tous, ce qui inclut ScrollTrigger. GSAP gère aussi la mise en œuvre technique (calculs au redimensionnement, synchronisation), ce qui explique sa place chez les agences.

WordPress : une extension ou le constructeur de pages

Sur WordPress, la plupart des constructeurs de pages intègrent des animations d’entrée, parfois des effets de défilement selon la version. Avant d’installer une extension dédiée, regardez donc les réglages de votre thème ou de votre constructeur. Pour un effet précis comme la séquence d’images, une extension spécialisée comme Scrollsequence évite tout développement. La question de savoir s’il faut savoir programmer trouve ici sa réponse : pour une apparition ou une parallaxe, non ; pour un récit animé sur mesure, oui. Si votre site utilise déjà l’un des plugins de landing page WordPress, cherchez d’abord dans les réglages d’animation de ses blocs.

Accessibilité : respecter prefers-reduced-motion

Certaines personnes souffrent de troubles liés au mouvement ou à l’attention. Un fond qui glisse ou un bloc qui zoome peut leur donner des nausées ou les empêcher de lire. Les systèmes d’exploitation proposent un réglage, souvent appelé « Réduire les animations », que le navigateur transmet au site sous le nom prefers-reduced-motion.

Votre site doit en tenir compte : quand ce réglage est actif, les animations décoratives sont coupées et le contenu s’affiche directement. Le code CSS plus haut le fait avec la règle @media (prefers-reduced-motion: no-preference), qui n’active l’animation que si le visiteur n’a rien demandé. GSAP et la plupart des extensions sérieuses permettent le même réglage : demandez-le explicitement à votre prestataire, il fait partie des tendances UX/UI utiles plutôt que décoratives.

Deux autres garde-fous : ne cachez jamais une information indispensable derrière une animation, et vérifiez que la page reste utilisable au clavier, sans souris ni molette.

La réserve

Une animation au scroll a un coût. Chaque effet ajoute du code, parfois une bibliothèque entière, et peut retarder l’affichage du contenu principal. Les animations qui modifient la mise en page font aussi sauter le texte pendant la lecture, ce que mesurent les indicateurs de vitesse et de stabilité des pages. Pour limiter la casse, faites animer uniquement la transparence et le déplacement (les propriétés opacity et transform), qui sollicitent peu le navigateur, et évitez d’animer beaucoup d’éléments à la fois.

Le second coût est humain : un site très animé vieillit vite et se maintient mal. Si vous changez de thème ou de constructeur, les effets disparaissent souvent avec lui, et chaque extension ajoutée est, comme tout outil informatique d’une petite structure, un élément de plus à mettre à jour. Pour un site d’entreprise, deux ou trois effets discrets et utiles (en-tête qui se réduit, apparition légère, barre de lecture) valent mieux qu’une page d’accueil chorégraphiée.

Questions fréquentes

Comment déclencher une animation CSS au scroll ?

Définissez une animation avec @keyframes, puis reliez-la au défilement avec la propriété animation-timeline : la fonction view() la déclenche quand l’élément entre à l’écran, scroll() la fait suivre la progression de la page. Entourez le tout d’une règle @supports pour les navigateurs qui ne la comprennent pas encore. Sans aucune ligne de JavaScript.

Quelle est la définition de scroll ?

Le scroll, ou défilement, désigne le déplacement vertical ou horizontal du contenu d’une page ou d’une zone qui dépasse la taille de l’écran. On le déclenche avec la molette, le doigt sur un écran tactile, la barre de défilement ou les touches du clavier.

Une animation au scroll ralentit-elle un site ?

Elle peut le ralentir si elle charge une bibliothèque lourde, anime beaucoup d’éléments ou masque le contenu principal jusqu’à la fin de l’effet. En se limitant aux propriétés opacity et transform, et au CSS natif quand c’est possible, l’impact reste faible. Mesurez la vitesse de la page avant et après l’ajout.

Qu'est-ce que prefers-reduced-motion ?

C’est une information que le navigateur transmet au site quand le visiteur a activé le réglage « Réduire les animations » de son système. Le site peut alors couper ses animations décoratives. Le respecter protège les personnes sensibles au mouvement et ne coûte que quelques lignes de CSS.