Des blocs qui apparaissent en douceur, des images qui glissent, des chiffres qui défilent au moment où ils arrivent à l'écran : les animations au scroll donnent de la vie à une page et accompagnent la lecture. Mal utilisées, elles ralentissent le site, gênent certains visiteurs et peuvent même cacher du contenu. Voici comment en tirer le meilleur.
L'intérêt des animations au scroll
Bien dosées, ces animations ont plusieurs vertus. Elles attirent l'attention sur les éléments importants au moment où ils deviennent visibles. Elles créent un rythme qui rend la lecture d'une longue page plus agréable. Et elles donnent une impression de soin et de modernité qui renforce l'image de marque.
Le mot important est « dosées » : une animation doit servir le contenu, pas le concurrencer.
Les techniques modernes
Pendant longtemps, ces effets reposaient sur du JavaScript qui surveillait en permanence la position de défilement, une méthode coûteuse pour le processeur, surtout sur mobile. Les navigateurs proposent aujourd'hui des outils bien plus performants :
- L'API Intersection Observer détecte efficacement le moment où un élément entre à l'écran, sans calcul continu ;
- Les animations CSS prennent ensuite le relais pour l'effet visuel ;
- Les animations liées au défilement en CSS, désormais prises en charge par les navigateurs récents, relient directement une animation à la progression du scroll, sans JavaScript.
Animer les bonnes propriétés
Toutes les propriétés CSS ne se valent pas pour l'animation. Animer la transparence et les transformations, comme le déplacement, l'échelle ou la rotation, est très économique pour le navigateur. Animer la largeur, la hauteur, les marges ou la position oblige au contraire à recalculer la mise en page à chaque image, ce qui provoque des saccades.
Ne jamais cacher le contenu
C'est le piège le plus fréquent : des éléments rendus invisibles en attendant leur animation. Si le script ne se charge pas, échoue ou est bloqué, le contenu reste invisible. Les moteurs de recherche peuvent aussi mal l'interpréter. La bonne pratique consiste à ne masquer les éléments que lorsque le script est effectivement actif, pour que la page reste lisible dans tous les cas.
Il faut aussi veiller à ne pas animer le contenu principal du premier écran : retarder son affichage dégrade l'indicateur de performance LCP mesuré par Google.
Respecter les préférences des visiteurs
Certaines personnes souffrent de troubles vestibulaires ou de sensibilité au mouvement : les animations peuvent leur provoquer vertiges ou nausées. Les systèmes d'exploitation proposent un réglage pour réduire les animations, que les sites peuvent détecter en CSS. Un site respectueux désactive ou simplifie ses animations au scroll lorsque ce réglage est actif. C'est une exigence des règles d'accessibilité.
Les bonnes pratiques de conception
Quelques principes pour des animations réussies :
- Des mouvements courts, entre deux cents et six cents millisecondes ;
- De faibles amplitudes, quelques dizaines de pixels de déplacement suffisent ;
- Une animation unique par élément, déclenchée une seule fois ;
- Une cohérence d'ensemble, avec les mêmes effets et les mêmes durées sur tout le site ;
- Aucune animation sur les contenus que le visiteur doit lire ou utiliser immédiatement.
Tester sur un vrai téléphone
Une animation fluide sur un ordinateur puissant peut saccader sur un téléphone d'entrée de gamme. Testez toujours sur un appareil modeste, et surveillez les performances dans les outils de développement du navigateur.
Mon conseil
Utilisez les animations au scroll comme un assaisonnement : quelques touches bien placées sur les éléments clés, jamais sur toute la page. Appuyez-vous sur les techniques modernes du navigateur, animez uniquement la transparence et les transformations, et respectez toujours la préférence de réduction des mouvements. Votre page gagnera en élégance sans rien perdre en rapidité.
