Scrollytelling

スクロールテリング / 2012– / Mise en page / Lecture sur le web

Une forme de page web où la position de lecture donne le tempo du récit. Les graphiques, les cartes et la vidéo se relaient au fil du défilement et reviennent dans le même ordre si le lecteur remonte. La recherche la range du côté de la version web du grand reportage, et son fil est soit rectiligne, soit élastique, seuls ceux qui le veulent plongeant plus profond.

Scrollytelling — interprétation générée par IA 1
Interprétation générée par IA, pas une œuvre de référence
Scrollytelling — interprétation générée par IA 2
Interprétation générée par IA, pas une œuvre de référence
Scrollytelling — interprétation générée par IA 3
Interprétation générée par IA, pas une œuvre de référence

En un coup d’œil

Signes visuels

  • Un graphique qui reste immobile à l'écran tandis qu'une seule colonne étroite de texte passe dessus
  • Les changements se font par l'opacité et par le déplacement de la carte, si bien que remonter les défait dans le même ordre
  • Photographie, vidéo et graphiques de données réunis dans un même article
  • Un parcours soit rectiligne, soit ouvert sur un détour facultatif plus profond dont on revient

Usages idéaux

  • Quand une enquête ou une présentation de recherche se met en page comme une page unique où le graphique tient et où seul le texte défile
  • Quand une lecture longue sur téléphone a besoin d'un moyen d'avancer qui ne demande aucune explication

Utiliser ce style

Appliquez le brief concis au projet ou transmettez la spécification structurée à un outil d’IA.

design.mdprompt d’imageAPI JSONMCP et accès machineComposer
ouvrir dans ChatGPTouvrir dans Claudeouvrir dans Google AI
Guide détaillé et sourcesRègles de production, œuvres de référence, comparaisons, recherche et citations

Entrée du dictionnaire

Typographie
Garder le texte sur une colonne. C'est le défilement qui fixe le rythme et non la page, donc resserrer la justification et ne placer les titres qu'aux articulations du récit.
Composition
Fixer le graphique et laisser le texte passer dessus. Le nombre de paragraphes attribués à un même graphique est exactement la vitesse du récit.
Matière
Ne construire que des changements réversibles, fondus d'opacité et déplacements de carte, chacun lié à la distance parcourue.
Précaution
Attacher au défilement une animation qui ne se joue qu'une fois laisse un lecteur remonté devant un vide et rend le milieu de l'article impossible à relire.
Pour approfondir
the difference between a single track thread and an elastic one, and the mechanism that brings a reader back in the elastic kind / the relation between how much body text is allotted to one graphic and how long it takes to read through / binding map movement to the amount scrolled and making it hold in both directions

Entrées liées

Souvent confondu avec

Plus de Lecture sur le web

Poursuivez avec des styles de Lecture sur le web, classés par effets communs.

Voir toutes les entrées Lecture sur le web

Citer cette entrée

Le dictionnaire est fait pour être lié. Prenez la forme qui convient là où vous écrivez.

Link
https://indexstyle.org/fr/styles/scrollytelling
Markdown
[Scrollytelling — IndexStyle](https://indexstyle.org/fr/styles/scrollytelling)
HTML
<a href="https://indexstyle.org/fr/styles/scrollytelling">Scrollytelling — IndexStyle</a>

Revenir à sa position dans l’index