# Scrollytelling (スクロールテリング)

> A web page form in which the reader's scroll position is the clock of the story, with graphics, maps and video changing as the page moves and reversing when the reader scrolls back. Visualization researchers treat it as the web equivalent of long form journalism and describe its structure as either linear or elastic, the elastic kind letting a reader dive deeper on demand. News outlets including the New York Times, the BBC and The Economist built the form out.

- IndexStyle No.528 — https://indexstyle.org/styles/scrollytelling
- Kind: Layout · Family: Reading on the Web · Era: 2012–
- Mood: Technology, Trust
- Color cues: #000000 / #FFFFFF / #4A4A4A (cues taken from reference works, not a fixed palette)

## Defining characteristics

- A graphic that holds still on screen while a single narrow column of text passes over it
- Changes made by opacity and by moving a map, so that scrolling back undoes them in the same order
- Photography, video and data visualization sharing one article
- A path that is either straight through or branches into an optional deeper detour and returns

## Best used for

- Laying out an investigation or a research explainer as one page where the graphic holds and only the text moves
- Giving a long read on a phone a way to advance that needs no instructions

## Composition recipe

- Typography & lettering: Keep the body in one column. The scroll sets the pace, not the page, so hold the measure narrow and place headings only at joints in the story.
- Layout & structure: Pin the graphic and let the text pass over it. How many paragraphs you assign to one graphic is the pacing.
- Material & texture: Build only changes that can run backwards, such as opacity crossfades and map moves, each tied one to one with scroll distance.

## What to avoid

Tying a one shot animation to the scroll leaves a reader who scrolls back looking at nothing, and makes the middle of the article impossible to reread.

## Application checklist

Before calling a piece an application of this style, check it against the defining characteristics:

- [ ] A graphic that holds still on screen while a single narrow column of text passes over it
- [ ] Changes made by opacity and by moving a map, so that scrolling back undoes them in the same order
- [ ] Photography, video and data visualization sharing one article
- [ ] A path that is either straight through or branches into an optional deeper detour and returns
- [ ] At least one reference work below has been studied directly
- [ ] The caution above ("What to avoid") has been addressed

## Related styles

- **Photo Essay (フォトエッセイ)** — The page form LIFE perfected: photographs edited into narrative arcs. Spread-scale contrasts, opening and closing images and the voice of captions gave photography a story grammar. → https://indexstyle.org/styles/photo-essay
- **Isotype (アイソタイプ)** — Translates quantity into repeated same-size symbols, making comparison readable before language. → https://indexstyle.org/styles/isotype

## Further study

- 一本道の筋と伸縮式の筋の違い、そして伸縮式で読者が戻ってくる仕組み
- 図版1つに割り当てる本文の量と、読み終わるまでの時間の関係
- 地図の移動を送りの量と結び、両方向で成立させる作り方

## Reference works

- arXiv (IEEE TVCG 版) — ScrollyVis: Interactive visual authoring of guided dynamic narratives for scientific scrollytelling — https://arxiv.org/abs/2207.03616

## Source of record

- arXiv (IEEE TVCG 版) — ScrollyVis: Interactive visual authoring of guided dynamic narratives for scientific scrollytelling — https://arxiv.org/abs/2207.03616

## Machine surfaces

- JSON: https://indexstyle.org/api/styles/scrollytelling
- Image-generation prompt (legally clean): https://indexstyle.org/styles/scrollytelling/prompt.txt
- MCP: https://indexstyle.org/mcp (tools: search_styles, get_style, compose_styles; prompts: image-prompt, apply-style)