Le récit défilant : exemples et inspirations¶
L'essentiel en 3 points
- Regardez ces exemples avec des yeux de développeur : pas seulement « c'est beau », mais qu'est-ce qui bouge, et pourquoi à ce moment-là?
- Pour chaque exemple, repérez les techniques du projet : calques, section épinglée, animation liée au défilement, déclencheur, média animable, moment dataviz.
- Gardez 2 ou 3 inspirations pour votre concept, et notez-les dans votre journal : ce que vous empruntez, et ce que vous en ferez.
Le récit défilant, en bref¶
Le terme anglais scrollytelling contracte scroll (défiler) et storytelling (raconter). Le principe : l'histoire avance au rythme du défilement. Le texte, les images, les sons, les vidéos et les données arrivent au moment où le lecteur les atteint.
La forme vient du journalisme. L'exemple fondateur est Snow Fall : The Avalanche at Tunnel Creek , publié par le New York Times en 2012. Depuis, on la retrouve dans les récits illustrés, les rapports annuels, les pages de produits et les sites promotionnels.
L'effet le plus connu est la parallaxe : des plans qui défilent à des vitesses différentes, pour créer une impression de profondeur. Mais un bon récit défilant ne se résume pas à ses effets : chaque animation sert l'histoire.
Comment regarder un exemple¶
Ouvrez l'exemple sur un ordinateur, défilez lentement, puis remontez. Posez-vous ces questions :
| Ce que vous observez | La question à vous poser | La technique, dans votre projet |
|---|---|---|
| Des plans qui bougent à des vitesses différentes | Combien de calques? Lequel va le plus vite? | Image en calques, CSS au défilement |
| Une section qui reste figée pendant que des choses changent | Combien de temps reste-t-elle épinglée? | GSAP + ScrollTrigger, pin |
| Un mouvement qui avance et recule avec le défilement | L'animation suit-elle exactement mon doigt? | scrub, animation-timeline |
| Un élément qui apparaît d'un coup, une seule fois | Qu'est-ce qui le déclenche? | IntersectionObserver |
| Un personnage ou un objet qui s'anime image par image | Combien d'images? | Spritesheet |
| Un dessin qui se trace, une forme qui change | Quelles parties bougent séparément? | SVG préparé, DrawSVG |
| Un graphique, un chiffre, une donnée réelle | Qu'est-ce que la donnée ajoute à l'histoire? | Moment dataviz, fetch() |
| Un repère de progression, un menu de chapitres | Comment sait-on où on est dans le récit? | Composant Vue |
Des histoires¶
The Boat
Une nouvelle adaptée en roman graphique défilant : dessins à l'encre, son, texte qui bouge. La référence du genre. À observer : comment le texte lui-même devient une animation.
The Bear and His Scarf
Une histoire illustrée, simple et touchante. Très proche de ce que vous pouvez réaliser en 8 semaines. À observer : le rythme, une idée par écran.
Firestorm, The Guardian
L'histoire d'une famille réfugiée sous un quai pendant un feu de forêt en Tasmanie (2013), racontée en chapitres avec photos, vidéo et son. À observer : comment le récit est découpé en chapitres, et comment chaque média ouvre une nouvelle étape.
Snow Fall
Le pionnier (New York Times, 2012). Les effets ont vieilli, mais la structure est toujours un modèle. À observer : comment chaque média arrive au bon moment du texte.
Des données qui racontent¶
Pour votre moment dataviz : les données ne sont pas un tableau ajouté à la fin, elles font avancer le récit.
The Pudding
Un site entier de récits défilants construits sur des données (musique, culture, société). Le meilleur modèle pour votre moment dataviz. À observer : un graphique qui se construit étape par étape.
Pixel Space
Le système solaire à l'échelle, où un pixel vaut la taille de la Lune. À observer : le défilement lui-même devient la mesure. Une idée simple, un effet énorme.
COVID-19 en Afrique, Fondation Mo Ibrahim
Un rapport de recherche transformé en récit. À observer : comment un graphique est introduit, expliqué, puis commenté.
Bilan 2021, Pine Cove
Un rapport annuel d'organisme en récit défilant. À observer : des chiffres qui deviennent des moments forts plutôt qu'un tableau.
Des techniques à décortiquer¶
Firewatch
Un paysage en calques qui défilent à des vitesses différentes. Exactement le média animable « image en calques ». À observer : combien de plans, et lequel va le plus vite.
AirPods Pro, Apple
Un produit qui tourne et se démonte au défilement : une séquence d'images pilotée par le scroll. C'est le cousin de la spritesheet. À observer : les sections épinglées.
Parallaxe, CodePen d'isladjan
Un paysage animé au défilement, avec son code ouvert. À observer : ouvrez les onglets HTML, CSS et JS, et repérez comment les calques sont construits.
La vitrine de GSAP
Des sites primés faits avec GSAP, la librairie que vous utiliserez. À observer : choisissez un site, défilez lentement, et repérez les sections épinglées et les animations liées au défilement (ScrollTrigger).
Introduction au scrollytelling, Shorthand
Un récit défilant qui explique les récits défilants. À observer : les grands types de mise en page (plein écran, texte par-dessus l'image, image épinglée).
scroll-driven-animations.style
Des démos des animations CSS pilotées par le défilement (animation-timeline, scroll(), view()), par l'équipe de Chrome. La technique de la parallaxe en CSS, sans librairie.
Démos ancien étudiants présentés en classe¶
Dans votre journal, seul d'abord
Individuellement, notez 2 ou 3 animations qui vous inspirent : le lien, ce qui bouge, ce que vous en retenez, et comment vous l'adapterez à votre histoire. S'inspirer, ce n'est pas copier : on emprunte une idée de mise en scène, pas le contenu ni le design.
Ensuite, en équipe, apportez vos inspirations dans votre brainstorm FigJam.