设计原则
叙事型页面的滚动动效必须服务因果、层级和节奏：每个运动段落都要解释一个状态变化或价值证据。
大理论
滚动叙事不是把页面做长，而是把用户理解路径拆成有节奏的证据链。运动负责连接章节、揭示状态变化、强调关键行动。
小知识点
- 每个章节只回答一个问题：是什么、如何工作、为什么可信、结果是什么、下一步是什么。
- scrubbed video/canvas 需要静态 poster 和 reduced-motion fallback。
- pinned 区块要短，结束后内容回到正常文档流。
- 关键内容不能只存在于视频帧、hover 或滚动中间状态。
设计判断
如果用户停止滚动时仍能读懂当前章节，动效就是辅助；如果停止滚动只看到抽象画面，动效已经压过信息。
实现建议
优先用 transform、opacity、clip-path、CSS variables 或成熟动画库控制滚动进度；避免连续驱动 width、height、top、left。为 prefers-reduced-motion 提供静态关键帧。
反例/风险
超长 pin、无法跳过的视频、滚动锁定、移动端触控不跟手、内容隐藏在透明层或 canvas 背后。
案例分析
Dayos 获得 Awwwards Site of the Day，页面信息显示其亮点包括 scroll scrubbed video、form transition、header、services、storytelling 和 CTA。它的产品语境是企业生产力与 multi-cloud operational AI，因此滚动视频和转场可以用来解释复杂系统，而不是仅作装饰。可学习点是：用动效把抽象 AI 服务变成一段可跟随的状态演示，同时保留明确 CTA。
来源链接
Awwwards Dayos: https://www.awwwards.com/sites/dayos
Agent 指令
使用滚动叙事前，先写章节问题列表和 fallback；实现后检查 reduced-motion、移动端触控、章节锚点和静态可读性。