En bref

• L’animation au défilement fait avancer une vidéo 3D quand le visiteur fait défiler la page, et la fait reculer quand il remonte.

• Le visiteur pilote l’animation : il avance à son rythme, ce qui retient son attention.

• Un encodage adapté, un fichier léger et une version mobile sont indispensables pour un résultat fluide.

• Elle convient aux pages d’accueil et aux produits ; elle est à éviter sur les pages purement pratiques.

L’animation au défilement inverse la logique de la vidéo classique. Au lieu de regarder un film qui se lance tout seul, le visiteur le pilote : il avance à son rythme, revient en arrière, s’arrête sur un détail. C’est ce qui la rend si efficace pour retenir l’attention sur une page d’accueil, là où une vidéo en lecture automatique est souvent ignorée.

Le principe

Une animation 3D est calculée à l’avance, image par image, comme un film. Sur la page, la position de défilement est convertie en un moment de la vidéo : en haut de la section, on voit la première image ; en bas, la dernière. Entre les deux, chaque mouvement de la molette ou du doigt fait avancer ou reculer l’animation.

Des textes courts apparaissent à des moments choisis, par exemple en bas à gauche puis en haut à droite, pour accompagner ce que l’on voit : le produit, puis un détail, puis l’appel à l’action. La section reste fixée à l’écran le temps de l’animation, puis la page reprend son défilement normal.

Les points techniques qui font la différence

• Un encodage adapté : pour que la vidéo réponde instantanément au défilement, chaque image doit pouvoir être affichée sans attendre les précédentes. Nous réencodons donc la vidéo spécialement pour cet usage.

• Un fichier léger : une animation de 5 à 15 secondes pèse en général entre 1 et 10 Mo une fois optimisée, et une version encore plus légère est chargée sur mobile.

• Un mouvement lissé : la vidéo rattrape la position de défilement avec une légère inertie, pour éviter les à-coups.

• Une image de départ : elle s’affiche immédiatement, pendant que la vidéo se charge.

• Des textes en vrai HTML : ils restent lisibles par Google et par les lecteurs d’écran, contrairement à un texte incrusté dans la vidéo.

• Une longueur réglable : la durée du défilement se règle selon la durée de l’animation, pour que le rythme reste naturel.

Concevoir l’animation pour le défilement

Une animation pensée pour le défilement ne s’écrit pas comme un film classique. Le mouvement de caméra doit être continu, sans coupes brutales, car le visiteur peut s’arrêter à n’importe quel moment. Chaque étape doit être lisible en image fixe. Et il faut prévoir des « respirations » visuelles, là où les textes apparaîtront, plutôt que de remplir tout l’écran.

Les animations les plus efficaces racontent une petite histoire en trois temps : une découverte, un détail, une révélation. Une enceinte qui sort de l’ombre, un processeur qui s’ouvre, une cellule qui libère des anticorps.

Vidéo précalculée ou 3D en temps réel ?

Il existe deux grandes approches. La 3D en temps réel (WebGL) calcule l’image dans le navigateur : elle permet de faire tourner un objet librement, mais le rendu est moins réaliste et plus exigeant pour les ordinateurs modestes. La vidéo précalculée offre un rendu photoréaliste, avec des matières, des lumières et des effets impossibles en temps réel, pour un poids maîtrisé. Pour une page d’accueil, c’est souvent le meilleur compromis.

Quand l’utiliser

• Pour montrer un produit sous plusieurs angles, ou l’ouvrir en vue éclatée.

• Pour raconter un mécanisme en étapes : la molécule s’approche, se fixe, la cellule réagit.

• Pour révéler un objet progressivement, comme une enceinte qui sort de l’ombre.

• Pour donner à une marque technique une image moderne dès la première seconde.

Quand l’éviter

• Sur une page où le visiteur cherche une information précise et rapide, comme un tarif ou un contact.

• Pour une animation très longue : au-delà de quelques écrans de défilement, le visiteur se lasse.

• Si l’animation n’a pas été pensée pour cet usage : un montage avec beaucoup de coupes se prête mal au défilement.

Voir le résultat

Le plus simple est de l’essayer : faites défiler nos démos laboratoire, neurosciences, cosmétique, industrie ou audio. Chacune a sa propre façon d’animer les textes, accordée à son produit.

Questions fréquentes

Est-ce que ça ralentit le site ?

Non, si l’animation est bien optimisée : la vidéo est allégée, une version mobile plus légère est chargée sur téléphone, et une image s’affiche immédiatement pendant le chargement.

Puis-je réutiliser une animation existante ?

Souvent, oui. Une animation avec un mouvement de caméra continu s’adapte très bien. Nous vous le disons dès le premier échange.

Les textes sont-ils pris en compte par Google ?

Oui. Les textes ne sont pas incrustés dans la vidéo : ce sont de vrais textes de la page, lisibles par les moteurs de recherche.

Toutes nos réalisations de ce type sont présentées sur la page Site web 3D.