# 滚动叙事（Scrollytelling）

镜语 · 版式与界面 / 布局方式

- 别名：滚动驱动动画、Scroll-driven Animation、滚动故事、视差滚动叙事
- 口语：「往下滚画面跟着变」「像苹果官网那样越滚越推进」「图片停住，文字从旁边滚过去」
- 一句话：画面固定在一侧，随着往下滚动按段落切换、推进，像翻一本会动的书
- 是什么：滚动叙事（Scrollytelling）让读者的滚动驱动故事前进：一侧画面固定，文字段落滚过时画面按段切换、推进或标注。《纽约时报》2012 年的《Snow Fall》让它广为人知，苹果产品页的「越滚越推进」也是同一类做法
- 缺了就不像：画面固定、文字滚过；滚动位置决定画面状态
- 加了更像：进度指示；分段标注；可以倒回
- 适合用在：作品故事、产品介绍、年度回顾和数据新闻；把一组照片或一个过程按时间顺序讲清楚；视频脚本的「分镜感」网页版，文字与画面一一对应
- 看哪里：在演示里往下滚：左侧照片保持不动，右边每一段文字到达中间时，照片切换成对应的时段，顶部进度条同步前进。往回滚画面也会倒回；滚动速度完全由你决定
- 注意：不要劫持滚动（改变滚动速度或强制停顿），NN/g 指出这会让用户失去控制感；每一步的变化要与文字对应，只为炫技的视差和飞入会分散注意；为减少动态效果的用户保留静态版本
- 描述示例：做一个滚动叙事风格（Scrollytelling）的摄影故事页：左侧一张全高照片用 position: sticky 固定，右侧是四段文字卡片；每段滚到视口中间时，左侧照片交叉淡入切换到对应场景（午后窗光 → 天台日落 → 外滩蓝调 → 雨夜霓虹），并在照片上显示时间标签；顶部细进度条随滚动增长；不改变滚动速度，往回滚画面也倒回；手机上改为照片在上、文字在下滚过
- 易混：
  - [分层视差](https://idea.ameng.dev/terms/parallax-layers.md)：分层视差只是各层移动速度不同；滚动叙事按段落改变画面内容
  - [杂志式排版](https://idea.ameng.dev/terms/editorial-layout.md)：杂志式排版是静态版面，滚动叙事加入了随滚动发生的变化
- 相关：[交叉溶解](https://idea.ameng.dev/terms/cross-dissolve.md)、[推进](https://idea.ameng.dev/terms/dolly-in.md)、[极简界面](https://idea.ameng.dev/terms/minimal-ui.md)

## 来源与延伸阅读

- [The New York Times · Snow Fall（2012）](https://www.nytimes.com/projects/2012/snow-fall/)
- [The Pudding · How to implement scrollytelling](https://pudding.cool/process/how-to-implement-scrollytelling/)
- [MDN · CSS scroll-driven animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations)
- [NN/g · Scrolljacking 101](https://www.nngroup.com/articles/scrolljacking-101/)

网页版（含演示）：https://idea.ameng.dev/terms/scrollytelling