Exemples de scrollytelling : 7 sites qui racontent en défilant

Qu'est-ce qui fait un bon exemple de scrollytelling ?

Un bon exemple de scrollytelling est une page où le défilement fait avancer le sens, pas seulement l'image. Si l'on retire le mouvement et que l'histoire reste intacte, c'était une page animée.

Une définition qui se lit en négatif

La définition la plus utile vient d'une rédaction, pas d'un éditeur d'outils. L'équipe graphique du quotidien suisse Neue Zürcher Zeitung a analysé cinquante articles en scrollytelling. Le guide de visualisation de données de data.europa.eu reprend leur travail.

Leur définition est simple. Il y a scrollytelling quand le défilement produit autre chose que le simple déplacement du document dans la fenêtre. Un titre qui glisse ne suffit pas. Un graphique qui change d'état à chaque paragraphe, si.

Cinq mécaniques, pas cinquante styles

Le même travail classe les pages en cinq techniques. C'est la grille que nous utilisons ici, parce qu'elle décrit ce que l'on construit, pas ce que l'on voit.

• La séquence graphique : un visuel fixe change d'état, étape par étape, pendant que le texte défile.
• La transition animée : les éléments d'un graphique se déplacent d'un état à l'autre, sans rupture.
• Le panoramique et le zoom : une carte ou une image se recadre au fil de la lecture.
• Le moviescroller : une séquence d'images ou de vidéo avance au rythme du pouce.
• Le show-and-play : un média se lance quand le lecteur atteint un point précis.

Cette grille change la conversation avec un studio. « On veut un effet comme ce site » devient « on veut une séquence graphique sur notre méthode en quatre étapes ». La seconde phrase se chiffre, se maquette et se teste.

Notre méthode de sélection et la grille de lecture d'un studio

Une sélection d'exemples n'a de valeur que si l'on sait comment elle a été faite. Voici la nôtre.

Ce que nous avons retenu, et ce que nous avons écarté

Nous avons cherché des pages publiées ou mises à jour entre 2023 et 2025, toujours en ligne le 8 octobre 2026. Nous voulions des contextes variés : institution, presse, université, marque grand public, communication d'entreprise.

Chaque page a été ouverte et lue avant d'entrer dans la liste. Nous avons écarté les références déjà décryptées dans notre sélection de sites immersifs, ainsi que le reportage fondateur du New York Times, connu de tous.

Nous avons aussi écarté deux références très citées, un reportage de NBC News et une introduction visuelle à l'apprentissage automatique. Leurs sites bloquent l'outil avec lequel nous relevons les pages. Nous ne présentons pas un exemple que nous n'avons pas pu vérifier.

Les quatre tests appliqués à chaque exemple

Chaque exemple passe par les mêmes questions. Ce sont celles que nous posons avant toute maquette.

1. Le test du texte seul. Le récit se lit-il dans la version texte de la page, sans animation ? C'est aussi ce que lisent un robot d'indexation et un lecteur d'écran.
2. Le test de la mécanique. Que pilote exactement le défilement, et dans laquelle des cinq familles cela range-t-il la page ?
3. Le test de la sortie. Le lecteur peut-il quitter le récit, sauter une étape ou changer de format ?
4. Le test du mouvement réduit. La page prévoit-elle un comportement pour les personnes qui désactivent les animations dans leur système ?

Le premier test a fait l'objet d'un relevé daté, le 8 octobre 2026. Ses résultats figurent plus bas, avec les chiffres de performance.

Sept exemples de scrollytelling classés par mécanique

La séquence graphique : Commission européenne, « How EU laws are made »

Cette page de la Commission européenne explique la procédure législative ordinaire. Un sujet austère, que la plupart des sites publics traiteraient avec un schéma en PDF.

Ici, le visuel reste en place et change à chaque bloc de texte. Qui intervient, qui propose, qui amende. Puis six étapes numérotées, de l'analyse d'impact jusqu'au comité de conciliation.

Ce qui fonctionne, c'est la retenue. Fond uni, une ligne, quelques pictogrammes. Le défilement ne sert qu'à découper une procédure en morceaux digestes.

Le test du texte seul est réussi : toutes les étapes figurent dans la version texte. Un détail nous a arrêtés. Le sélecteur de langue propose le français, mais ce lien renvoyait, lors de notre relevé, vers une page indiquant que seule la version anglaise existe.

Ce qu'une marque peut en tirer. La séquence graphique est la mécanique idéale pour une méthode, un processus de fabrication ou un parcours client. Elle coûte peu, se lit partout et supporte très bien le mouvement réduit.

La transition animée : The Pudding, « 24 hours in an invisible epidemic »

Ce récit de The Pudding, publié en septembre 2023 et signé Alvin Chang, parle de solitude. Le lecteur suit Martin, 62 ans, et d'autres personnages pendant une journée de 2021.

L'idée maîtresse tient en une horloge. Chaque geste du pouce fait avancer le temps, minute par minute, de 4 h du matin à 4 h le lendemain. Le texte arrive à certaines heures, comme une voix off.

Les données viennent d'une enquête officielle américaine sur l'emploi du temps. À la fin, les personnages sont triés selon leur niveau de satisfaction de vie, et le lien avec l'isolement saute aux yeux.

Ce qu'une marque peut en tirer. Le défilement est ici une unité de mesure, pas un effet. Quand votre sujet a un axe naturel, la durée, la distance, une montée en gamme, le scroll peut l'incarner.

La transition animée, version expertise : The Conversation, « The science of beautiful buildings »

Ce récit de The Conversation, publié en août 2025, est signé par Michael J. Ostwald, professeur d'architecture à UNSW Sydney. La question posée : pourquoi trouve-t-on un bâtiment beau, puis change-t-on d'avis ?

Le cœur de la page est une courbe en cloche, issue des travaux du psychologue Daniel Berlyne. Au fil du défilement, des bâtiments célèbres viennent s'y placer. La villa Stein de Le Corbusier, la Robie House de Frank Lloyd Wright, une maison de Frank Gehry.

Le lecteur n'apprend pas une théorie. Il la voit se remplir sous ses yeux, exemple après exemple.

Ce qu'une marque peut en tirer. C'est le format parfait pour une marque d'expertise : cabinet, bureau d'études, conseil. Un concept maison, un schéma, des cas qui s'y positionnent un à un.

Le panoramique et le zoom : UCL, « The Library of Lost Maps »

Cet article du magazine Portico de l'University College London, paru à l'automne 2025, raconte la redécouverte d'une cartothèque oubliée. L'auteur, le cartographe James Cheshire, y a ouvert 440 tiroirs en bois.

Les cartes ne sont pas posées comme des illustrations. Une carte murale de la Chine de 1931 se déplie. Une carte du Cervin passe d'une version vierge à la version glaciaire, puis à un gros plan.

La page mêle aussi des vidéos en boucle tournées dans la salle d'archives. Elles se déclenchent dans le flux de lecture, ce qui la rapproche du show-and-play.

Le meilleur détail est ailleurs. En tête d'article, un sélecteur propose trois formats : lire, imprimer ou écouter, avec un lecteur audio complet. C'est la meilleure réponse au test de la sortie de toute notre sélection.

Ce qu'une marque peut en tirer. Le zoom sert les sujets où le détail est la preuve : un savoir-faire, une matière, un plan. Et offrir une version écoutable coûte peu face à ce qu'elle apporte.

Le moviescroller : Apple, page AirPods Pro 3

La page française des AirPods Pro 3 reste la référence que l'on cite le plus en premier brief. Le produit apparaît, se tourne, s'ouvre au fil de la lecture.

En lisant la page, on remarque que ses visuels sont livrés par paires : une image de début et une image de fin de séquence. C'est la signature de transitions jouées entre deux états pendant le défilement.

Ce qui distingue Apple, c'est la discipline du texte. Chaque scène porte un titre court et une phrase de bénéfice, tous présents dans la version texte. Le test du texte seul est réussi.

Ce qu'une marque peut en tirer. Le moviescroller impressionne, mais il réclame des visuels produits d'un niveau rare. Sans prises de vue ou rendus 3D de cette qualité, la mécanique expose le manque au lieu de le masquer.

Le moviescroller en communication d'entreprise : Amazon, station de livraison en bois

Cet article d'Amazon News, publié en octobre 2025, présente une station de livraison de l'Indiana, construite en bois massif. L'éditeur Shorthand le décrit comme un rendu 3D que l'on traverse en défilant, des poteaux jusqu'à la toiture.

Nous le gardons pour une autre raison. Lors de notre relevé du 8 octobre 2026, la version texte récupérée par notre outil ne contenait que la navigation du site. Le récit lui-même n'y apparaissait pas.

Cela ne prouve pas que la page est invisible pour Google. Cela montre qu'un récit peut dépendre entièrement du JavaScript pour exister. C'est exactement le point à vérifier sur votre propre projet.

Ce qu'une marque peut en tirer. Le scrollytelling n'est pas réservé aux médias. Une entreprise industrielle peut faire visiter un bâtiment, une usine ou une chaîne logistique. À condition que le texte reste lisible sans la mise en scène.

Le récit d'un repositionnement : Altitude 101, par Metabole Studio

Le septième exemple est l'un de nos projets. Altitude 101 est une société de production audiovisuelle parisienne. Elle a travaillé avec Nike, Google, Puma et Paris 2024.

Après une carrière centrée sur le film publicitaire, l'équipe a pris un virage vers les formats immersifs pour l'Apple Vision Pro. Le site devait raconter ce virage. Faire passer Altitude 101 d'un studio de production classique à un acteur du récit immersif.

Le sujet n'était donc pas un produit à faire tourner. C'était un avant et un après. Cette nuance décide de tout : un repositionnement se raconte comme une transformation, pas comme une fiche technique.

[VISUEL ORIGINAL À FOURNIR : séquence d'écrans du site Altitude 101, montrant le passage du film publicitaire aux formats immersifs]

Que révèlent ces exemples sur la performance et l'accessibilité ?

Ils révèlent qu'un bon récit au défilement se juge aussi sur un téléphone moyen et sur un réglage d'accessibilité. Les plus solides de notre sélection sont aussi les plus sobres techniquement.

Le relevé du texte seul, exemple par exemple

• Commission européenne : mécanique : Séquence graphique ; récit lisible sans animation (relevé du 8 oct. 2026) : Oui ; format alternatif : Non relevé
• The Pudding : mécanique : Transition animée ; récit lisible sans animation (relevé du 8 oct. 2026) : Oui ; format alternatif : Non relevé
• The Conversation : mécanique : Transition animée ; récit lisible sans animation (relevé du 8 oct. 2026) : Oui ; format alternatif : Non relevé
• UCL, Portico : mécanique : Panoramique, zoom, vidéo ; récit lisible sans animation (relevé du 8 oct. 2026) : Oui ; format alternatif : Lire, imprimer, écouter
• Apple, AirPods Pro 3 : mécanique : Moviescroller ; récit lisible sans animation (relevé du 8 oct. 2026) : Oui ; format alternatif : Film produit
• Amazon News : mécanique : Moviescroller ; récit lisible sans animation (relevé du 8 oct. 2026) : Navigation seule dans notre relevé ; format alternatif : Non relevé

Trois des pages de cette liste portent la mention « Built with Shorthand », un outil de récit sans code. Ce n'est pas un hasard : ces outils servent le texte en HTML par défaut.

Le mobile reste le juge de paix

Un exemple vu sur un grand écran de studio ne dit rien de son comportement dans le métro. Les chiffres du web réel rappellent l'écart.

D'après HTTP Archive (Web Almanac 2025, chapitre Performance), 48 % des sites mobiles obtiennent de bons Core Web Vitals, contre 56 % sur ordinateur. Plus d'un site mobile sur deux échoue donc avant même d'ajouter un récit animé.

Le même chapitre mesure le temps de blocage total, ces moments où la page ne répond plus. D'après HTTP Archive (Web Almanac 2025), sa médiane mobile atteint 1 916 millisecondes, en hausse de 58 % sur un an. Chaque bibliothèque d'animation ajoutée pèse dans cette balance.

Dernier point du rapport, très lié au scrollytelling. D'après HTTP Archive (Web Almanac 2025), 40 % des pages mobiles contiennent des animations non composées. Ces animations modifient la mise en page au lieu de seulement déplacer des calques, et provoquent des décalages visibles.

Le mouvement réduit, angle mort de la moitié du web

Le défilement lui-même est essentiel à la lecture. Tout ce qu'on lui ajoute ne l'est pas. Le W3C (WCAG 2.2, critère 2.3.3) cite précisément la parallaxe comme animation souvent non essentielle, capable de provoquer vertiges et nausées.

D'après HTTP Archive (Web Almanac 2025, chapitre Accessibilité), la requête qui détecte ce réglage figure sur environ 50 % des pages mobiles. L'autre moitié l'ignore. Sur un site narratif, c'est un risque concret pour une partie de vos visiteurs.

L'équipe de WebKit, le moteur de Safari, apporte une nuance utile dans son guide de 2025. Une petite barre de progression gêne rarement. Les animations larges, qui simulent la profondeur par parallaxe, zoom ou flou, sont celles qui posent problème.

Le même guide annonce l'arrivée des animations pilotées par le défilement, en CSS natif, dans Safari 26. Pour beaucoup de séquences graphiques, il devient possible de se passer de bibliothèque JavaScript. C'est une bonne nouvelle pour la performance mobile.

Comment passer d'un exemple à votre propre récit de marque ?

En partant de votre histoire, puis en choisissant la mécanique la plus légère capable de la porter. L'exemple ne sert qu'à nommer cette mécanique, jamais à dicter le contenu.

Ce qu'on entend le plus souvent en premier brief, c'est : « on veut un site comme la page Apple ». Le réflexe est de chercher un développeur capable de reproduire l'effet. En réalité, la page Apple repose sur des années de production d'images, pas sur une astuce de code. Le bon point de départ est ce que vous avez à montrer.

Les trois leviers à actionner dès cette semaine

Voici la méthode que nous appliquons avec nos clients. Elle tient en trois étapes, réalisables avant toute maquette.

1. Écrire le récit en cinq phrases

Sur beaucoup de projets narratifs, le récit tient en cinq phrases avant de tenir en cinq scènes. Écrivez-les sans penser à l'image. Une situation, une tension, un tournant, une preuve, une issue.

Si vous n'y arrivez pas, aucun exemple ne vous aidera. Comptez une demi-journée, à plusieurs, avec la personne qui vend le mieux votre offre en rendez-vous.

2. Associer une mécanique à chaque phrase

Pour chaque phrase, demandez-vous ce qui doit bouger pour la rendre évidente. Une étape qui s'ajoute appelle une séquence graphique. Une comparaison appelle une transition animée. Un détail de fabrication appelle un zoom.

Notez la mécanique en face de chaque phrase, avec l'exemple de cette liste qui l'illustre le mieux. Votre brief vient de passer de « on veut un effet waouh » à un document que l'on peut chiffrer. Notre guide GSAP détaille les outils qui se cachent derrière chaque famille.

3. Tester vos exemples comme nous les avons testés

Ouvrez chaque référence sur votre téléphone, en 4G, dans la rue. Puis activez la réduction des animations dans les réglages d'accessibilité de votre système, et rouvrez-la.

Enfin, cherchez une phrase précise du récit dans Google. Si la page ne remonte pas, son texte est peut-être prisonnier du JavaScript. Notre article sur le référencement des sites immersifs explique comment l'éviter. Comptez une heure pour l'ensemble.

Trois erreurs quand on s'inspire d'un exemple de scrollytelling

Copier la mécanique d'un exemple sans en avoir le contenu

On voit souvent ce schéma chez les marques en lancement : le dossier d'inspiration est rempli de reportages de presse. Le réflexe est de vouloir la même profondeur de récit. En réalité, The Pudding s'appuie sur une enquête de milliers de personnes, et la marque n'a que trois chiffres. La mécanique doit suivre la matière disponible, pas l'inverse.

Prendre un exemple éditorial comme modèle de page commerciale

Un article de presse peut garder son lecteur vingt minutes sans lui demander quoi que ce soit. Une page de marque doit mener quelque part : un rendez-vous, un devis, une candidature.

Un schéma revient dans les projets B2B : la page d'accueil reprend la structure d'un long reportage. Le réflexe est d'y voir un signe d'exigence. En réalité, le prospect cherche le contact au bout de trente secondes et ne le trouve pas. Gardez l'exemple éditorial pour une page dédiée, et laissez l'accueil respirer.

Oublier les visiteurs qui ne verront jamais l'animation

Un cas typique lors des audits de sites narratifs : la page est superbe sur l'écran du studio. Le réflexe est de valider sur cette seule base. En réalité, une partie des visiteurs a réduit les animations, une autre navigue au clavier, une autre écoute la page. C'est un sujet de conformité autant que d'image, détaillé dans notre guide sur l'accessibilité et le RGAA.

Vos questions les plus fréquentes sur les exemples de scrollytelling

Combien coûte un scrollytelling comparable à ces exemples ?

Tout dépend de la mécanique retenue. Une séquence graphique sur une section existante n'a rien à voir avec un moviescroller nourri de rendus 3D. Sur nos projets, une section dédiée intégrée à un site démarre autour de 8 000 à 15 000 euros. Une page complète exigeante se situe plutôt entre 25 000 et 60 000 euros. Le budget se joue surtout sur la production des visuels. Notre guide du prix d'un site web immersif détaille ces écarts.

Faut-il un outil sans code ou un développement sur mesure ?

Trois exemples de cette sélection sont construits avec Shorthand : la Commission européenne, The Conversation et UCL. Ces outils excellent pour les récits éditoriaux, les rapports et la communication institutionnelle. Le sur mesure devient nécessaire quand le récit doit épouser votre identité visuelle, s'intégrer à un site existant ou piloter de la 3D. La question à poser est simple : votre page doit-elle ressembler à un article ou à votre marque ?

Combien de scènes prévoir pour une page de marque ?

Moins que vous ne l'imaginez. Une page d'accueil supporte rarement plus de trois à cinq moments forts avant que le visiteur ne cherche la sortie. Un récit long trouve mieux sa place sur une page dédiée, reliée à l'accueil. Notre conviction : une scène qui ne fait pas avancer la décision du lecteur doit sortir du storyboard, même si elle est belle.

Le scrollytelling convient-il à une marque B2B ?

Oui, quand le sujet a une structure à montrer. Une procédure, une méthode, un bâtiment, une chaîne de fabrication s'y prêtent très bien, comme le montrent la Commission européenne et Amazon. Il convient moins à une offre qui se comprend en une phrase. En B2B, le meilleur usage reste souvent une page « méthode » ou un rapport annuel, pas l'accueil entier.

Comment mesurer l'efficacité d'un récit au défilement ?

Le taux de rebond trompe souvent sur ce type de page, puisqu'un lecteur peut tout lire sans cliquer. Mieux vaut suivre l'atteinte de chaque scène par des événements dans votre outil d'analyse. Mesurez aussi la part des lecteurs qui arrivent à l'appel à l'action final. Ces indicateurs montrent où le récit perd son public, scène par scène.

Peut-on traduire un scrollytelling dans plusieurs langues ?

Oui, mais prévoyez-le dès le storyboard. Un texte allemand ou anglais n'a pas la même longueur qu'en français, et une scène calée au mot près se décale vite. Vérifiez aussi que chaque version existe vraiment : lors de notre relevé, un lien vers une version française menait à une page d'erreur de langue. Une version traduite se teste comme une page à part entière.

Le bon exemple est celui qui vous apprend une mécanique

Sept pages, cinq façons de faire avancer un récit avec le pouce. Aucune ne ressemble aux autres, et pourtant les meilleures partagent trois traits.

Leur texte existe sans l'animation. Leur mécanique colle à la forme du sujet : une horloge pour une journée, une courbe pour une théorie, un zoom pour une archive. Et elles laissent toujours une porte de sortie au lecteur.

Avant de choisir une référence, choisissez donc votre histoire. Écrivez-la en cinq phrases. Puis cherchez, parmi ces exemples et ceux de notre sélection de sites immersifs, la mécanique qui la rendra évidente.

Votre récit mérite mieux qu'un effet emprunté. Il mérite une mise en scène qui n'appartient qu'à lui.

Alan Chevereau, consultant SEO. Il accompagne Metabole Studio sur sa stratégie de contenu et son référencement, en français et en anglais.