Définition simple
Le scrollytelling consiste à synchroniser des éléments visuels (vidéo, 3D, illustrations, texte) à la progression du scroll. Au lieu d'autoplayer une vidéo de 60 secondes, on découpe la narration : le visiteur avance à son rythme, et chaque section a son moment dramatique.
Pourquoi ça augmente l'attention
Le scroll est un geste actif. Quand il déclenche un changement visuel, le cerveau attribue ce changement à une action personnelle. Le visiteur devient acteur, pas spectateur. Le temps passé sur la page augmente naturellement de 2 à 4 fois, et la mémorisation de la marque s'inscrit dans le long terme.
Les ingrédients techniques
- Sticky containers pour fixer la scène pendant que le texte défile
- ScrollTrigger (GSAP) ou Framer Motion pour synchroniser
- Vidéo frame-by-frame ou 3D pilotée par scroll progress
- Préchargement progressif pour éviter les ruptures
- Mode dégradé mobile pour préserver la batterie et la performance
Exemples par secteur
Dentaire
Le scroll suit le parcours patient : diagnostic, visualisation 3D de l'implant, intervention, résultat. Le patient comprend en 90 secondes ce qu'une brochure explique mal en 5 pages. Conséquence directe : prise de rendez-vous facilitée et désistement réduit.
Luxe et parfum
Le scroll fait tourner le flacon, révèle l'histoire de la maison, dévoile les ingrédients. C'est de l'éditorial premium qui justifie un prix sans jamais avoir à l'annoncer frontalement.
Immobilier d'exception
Caméra qui se déplace dans le bien au scroll, annotations qui apparaissent sur chaque pièce, données techniques discrètes. Le prospect arrive en visite déjà convaincu — il vient confirmer, pas découvrir.
SaaS et B2B technique
Le scroll dévoile une architecture, un dashboard, une intégration. Plus efficace qu'une démo vidéo de 5 minutes que personne ne regarde jusqu'au bout.
Bonnes pratiques performance
Sur mobile, le scrollytelling 3D peut tuer la batterie. Toujours prévoir un mode dégradé : vidéo statique ou succession d'images. La règle : si le téléphone chauffe, on a perdu. Une scène scrollytelling correctement optimisée doit tenir 60 fps même sur un iPhone de 4 ans.
Erreurs fréquentes
- Vouloir scrollytelliser une page qui n'a pas de scénario
- Multiplier les effets sans hiérarchie
- Oublier les utilisateurs qui scrollent vite : prévoir un mode « skip »
- Négliger la version mobile (où se joue 80 % du trafic)
- Confondre démo technique et outil commercial
