Maîtriser les Animations Déclenchées au Scroll
Les bases pour créer des animations qui s’activent quand vos utilisateurs font défiler la page. Révéler du contenu progressivement.
Créer un Effet Parallaxe Fluide et Performant
Pourquoi le Parallaxe Marche
Le parallaxe, c’est ce mouvement où le fond se déplace plus lentement que le premier plan. Vous l’avez vu partout — des sites qui racontent une histoire en scrollant. Le truc, c’est que la plupart des gens font ça mal. Les animations ralentissent le site, les utilisateurs sur téléphone voient rien qui marche, et tout devient juste du bruit visuel.
On va vous montrer comment vraiment implémenter le parallaxe sans casser votre performance. Pas de librairies complexes. Pas de JavaScript qui consomme la batterie. Juste des techniques solides qui marchent partout.
Le secret : Le meilleur parallaxe est souvent invisible. L’utilisateur ressent l’effet sans vraiment le voir.
01
La Base : Utiliser Transform, Pas Position
Vous pensez peut-être faire du parallaxe avec des changements de `position` ou de `top/bottom`. Mauvaise idée. Ça force le navigateur à recalculer le layout à chaque frame — c’est ce qui ralentit tout.
Utilisez plutôt `transform: translateY()` ou `transform: scale()`. C’est composité, ça marche sur le GPU, et c’est vraiment rapide. La différence? Jusqu’à 60 fps constant au lieu de 15-20 fps qui saccade.
Les couches se déplacent à des vitesses différentes avec une simple multiplication : si l’utilisateur scroll de 100px, le fond va de 100px 0.5 = 50px. Le premier plan va à 100px. Boum, vous avez la profondeur.
02
Optimisation : Will-Change et Compositing
Dites au navigateur ce que vous allez changer. Avec `will-change: transform`, vous dites “Hey, cette couche va bouger”. Le navigateur prépare un nouveau calque composité et ne calcule plus le layout à chaque fois.
Ça semble petit, mais c’est énorme. Sur un téléphone, vous passez de 20 fps à 55-58 fps juste en ajoutant trois mots. Vraiment.
Astuce importante : utilisez `will-change` seulement sur les éléments qui vont vraiment bouger. Pas sur tout. Sinon vous consommez la mémoire du GPU pour rien.
À savoir : Les techniques décrites ici sont basées sur les normes CSS et JavaScript actuelles. La performance dépend du navigateur, de l’appareil et de la connexion réseau. Testez toujours sur des appareils réels — un téléphone bas de gamme de 2022 est votre meilleur juge de ce qui marche vraiment.
03
RequestAnimationFrame, Pas Scroll Event
Le scroll event se déclenche des centaines de fois par seconde. C’est un cauchemar pour les performances. À chaque déclenchement, vous calculez les positions, vous mettez à jour les styles — c’est du travail lourd répété en boucle serrée.
Utilisez `requestAnimationFrame` avec un throttle. Vous enregistrez la position du scroll une fois, puis vous l’appliquez dans la frame suivante du navigateur. C’est naturellement limité à 60 fps (ou 120 fps sur les écrans récents), ce qui rend tout fluide sans surcharge.
Le code devient plus propre aussi. Vous découpiez votre logique d’animation de celle du scroll, ce qui rend tout maintenable.
04
Mobile : Réduire ou Désactiver
Le parallaxe sur mobile, c’est délicat. Les batteries se vident vite. L’écran petit rend l’effet moins visible. Et beaucoup de navigateurs mobiles gèrent mal les animations complexes.
Notre approche : désactivez le parallaxe en dessous de 768px. Vous gardez les animations de révélation (fade in, slide), mais pas le mouvement de parallaxe. Les utilisateurs mobiles voient toujours une belle expérience, juste sans la couche parallaxe qui consommerait la batterie.
Si vous voulez vraiment du parallaxe sur mobile, réduisez l’intensité. Au lieu de multiplier par 0.5, utilisez 0.2. L’effet est toujours là, mais moins gourmand.
Points Clés à Retenir
Transform, Pas Position
Utilisez `transform: translateY()` pour bouger les couches. C’est composité et rapide, contrairement aux changements de `position`.
Will-Change Strategic
Appliquez `will-change: transform` seulement aux éléments qui bougent vraiment. C’est puissant mais à utiliser avec parcimonie.
RequestAnimationFrame
Évitez le scroll event. Utilisez `requestAnimationFrame` pour un throttle naturel et une performance stable.
Mobile First
Désactivez ou réduisez le parallaxe sur mobile. L’effet ne vaut pas la batterie consommée et l’expérience reste bonne sans.
Multiplicateurs Modérés
Un multiplicateur de 0.3 à 0.5 crée un effet visible sans être excessif. Plus n’est pas mieux.
Testez Partout
Un iPhone 11, un téléphone Android bas de gamme, un vieux laptop. Si ça marche sur ça, c’est bon partout.
Le Parallaxe, C’est Une Question d’Équilibre
L’effet parallaxe marche mieux quand personne ne le remarque. Vous regardez un site, vous scrollez, et il y a cette sensation de profondeur — c’est fluide, ça se sent naturel, ça raconte l’histoire visuellement. C’est ça le but.
Vous n’avez pas besoin de librairies lourdes ou de JavaScript complexe. Un peu de CSS bien pensé, quelques lignes de JavaScript propre avec `requestAnimationFrame`, et vous avez quelque chose qui marche partout — desktop, tablette, mobile.
L’optimisation, c’est pas optionnel. C’est la différence entre une expérience qu’on oublie et une expérience qu’on montre à ses copains. Testez sur des vrais appareils. Mesurez les performances. Ajustez. Voilà comment on fait du bon web.
Articles Connexes
