Scrollytelling

スクロールテリング / 2012– / Composición / Lectura en la web

Una forma de página web en la que la posición de lectura marca el avance del relato. Los gráficos, los mapas y el vídeo se relevan a medida que se desplaza la página y vuelven atrás en el mismo orden si el lector sube. La investigación la ha ordenado como la versión web del reportaje largo, y su hilo es o bien recto o bien elástico, de modo que solo baja a mayor profundidad quien lo desea.

Scrollytelling — interpretación generada por IA 1 — Interpretación generada por IA, no una obra de referencia

Scrollytelling — interpretación generada por IA 2 — Interpretación generada por IA, no una obra de referencia

Scrollytelling — interpretación generada por IA 3 — Interpretación generada por IA, no una obra de referencia

De un vistazo

Rasgos visuales

Un gráfico que se queda quieto en la pantalla mientras una sola columna estrecha de texto pasa por encima
Los cambios se hacen con la opacidad y con el movimiento del mapa, así que al subir se deshacen en el mismo orden
Fotografía, vídeo y gráficos de datos conviviendo dentro de un mismo artículo
El recorrido es recto o se abre en un desvío opcional más profundo del que se vuelve

Usos idóneos

Cuando se monta una investigación o una divulgación científica como una sola página donde el gráfico se queda y solo corre el texto
Cuando una lectura larga en el móvil necesita una forma de avanzar que no haga falta explicar

Usar este estilo

Lleva el resumen al proyecto o entrega la especificación estructurada a una herramienta de IA.

design.md prompt de imagen API JSON MCP y acceso automático Combinar

abrir en ChatGPT abrir en Claude abrir en Google AI

Guía detallada y fuentesReglas de producción, obras de referencia, comparaciones, investigación y citas

Entrada del diccionario

Tipografía: Mantén el texto en una columna. El ritmo lo pone el desplazamiento y no la página, así que estrecha la medida y coloca los títulos solo en las junturas del relato.
Composición: Fija el gráfico y deja que el texto pase sobre él. Cuántos párrafos asignas a un mismo gráfico es exactamente la velocidad del avance.
Material: Construye solo cambios que puedan correr hacia atrás, como los fundidos de opacidad y los desplazamientos del mapa, cada uno atado a la distancia recorrida.
Precaución: Si atas al desplazamiento una animación que solo se reproduce una vez, quien vuelva hacia arriba se encontrará con un hueco vacío y ya no podrá releer la mitad del artículo.
Para profundizar: 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

Entradas relacionadas

Photo Essay (フォトエッセイ)Efectos compartidos: Trust.Comparar Scrollytelling y Photo Essay
Isotype (アイソタイプ)Efectos compartidos: Trust / Technique.Comparar Scrollytelling y Isotype

Se confunde a menudo con

Explorable Explanations (エクスプローラブル・エクスプラネーション)comparar

Más de Lectura en la web

Continúa con estilos de Lectura en la web, priorizados por sus efectos compartidos.

Ver todas las entradas de Lectura en la web

Citar esta entrada

El diccionario existe para que se enlace. Toma la forma que encaje donde estés escribiendo.

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

Volver a su posición en el índice