看哪里 在演示里往下滚：左侧照片保持不动，右边每一段文字到达中间时，照片切换成对应的时段，顶部进度条同步前进。往回滚画面也会倒回；滚动速度完全由你决定
这是什么
滚动叙事（Scrollytelling）让读者的滚动驱动故事前进：一侧画面固定，文字段落滚过时画面按段切换、推进或标注。《纽约时报》2012 年的《Snow Fall》让它广为人知，苹果产品页的「越滚越推进」也是同一类做法
也叫滚动驱动动画Scroll-driven Animation滚动故事视差滚动叙事
关键特征
- 缺了就不像
- 画面固定、文字滚过滚动位置决定画面状态
- 加了更像
- 进度指示分段标注可以倒回
容易混淆
- 分层视差Layered Parallax
分层视差只是各层移动速度不同；滚动叙事按段落改变画面内容
- 杂志式排版Editorial Layout
杂志式排版是静态版面，滚动叙事加入了随滚动发生的变化
滚动叙事Scrollytelling
画面固定在一侧，随着往下滚动按段落切换、推进，像翻一本会动的书
你可能会说
- 往下滚画面跟着变
- 像苹果官网那样越滚越推进
- 图片停住，文字从旁边滚过去
适合用在
- 作品故事、产品介绍、年度回顾和数据新闻
- 把一组照片或一个过程按时间顺序讲清楚
- 视频脚本的「分镜感」网页版，文字与画面一一对应
这样描述给 AI
做一个滚动叙事风格（Scrollytelling）的摄影故事页：左侧一张全高照片用 position: sticky 固定，右侧是四段文字卡片；每段滚到视口中间时，左侧照片交叉淡入切换到对应场景（午后窗光 → 天台日落 → 外滩蓝调 → 雨夜霓虹），并在照片上显示时间标签；顶部细进度条随滚动增长；不改变滚动速度，往回滚画面也倒回；手机上改为照片在上、文字在下滚过