滚动叙事章节契约

大理论

滚动叙事不是“长页面 + 炫动效”，而是一种章节化解释结构。用户通过滚动控制阅读节奏，界面用 sticky graphic、step trigger、progress 或短 pin 来把当前章节与视觉状态连接起来。健康的滚动故事先定义章节问题和静态可读性，再选择 Scrollama、IntersectionObserver、CSS scroll-driven animations、GSAP ScrollTrigger 或原生 sticky。

小知识点

1. 每个 chapter 只回答一个问题：系统发生了什么、为什么可信、状态如何变化、用户下一步能做什么。
2. 文本是锚点，不是字幕。标题、正文、关键数字和 CTA 应保持真实 HTML 文档流，不能只存在于 canvas/video/hover/中间帧。
3. Step-trigger 适合离散章节：进入第 2 步切换图表、设备状态或产品截图。连续 scrub 只适合真实连续变量，例如进度、时间线或模型状态。
4. Sticky graphic 比长 pin 更稳。长 pin 会改变滚动距离预期，移动端尤其容易让用户觉得页面被卡住。
5. Fallback 先于动效：no-JS、reduced-motion、移动端、打印和慢网都应看到完整章节与代表性关键帧。
6. 实现层避免每次 scroll 驱动 React state。IntersectionObserver 适合阈值触发，Scrollama 封装 step/progress，GSAP 适合复杂 timeline；所有 observer、RAF、ScrollTrigger、Lenis 和媒体监听都要 cleanup。

设计判断

当用户停在任何章节都能读懂结论，并且继续滚动只会补足因果和节奏，这个滚动故事成立。如果用户必须精准滚到某一帧才能理解定价、合规、产品能力或 CTA，动效已经夺走了内容控制权。

实现建议

建立 ScrollStoryStep 数据：id、title、body、visualState、fallbackImage、alt、evidenceHref。再写 motion model：static、sticky、step、scrub、pinned 或 video-sequence。技术选择从低风险开始：CSS sticky -> IntersectionObserver/Scrollama -> CSS scroll-driven animation progressive enhancement -> GSAP ScrollTrigger -> Lenis/WebGL sync。QA 至少覆盖键盘、锚点、浏览器返回/恢复、reduced-motion、移动触控、无横向溢出、媒体加载失败和组件卸载 cleanup。

反例/风险

首屏长时间 pin 住只播放抽象视觉；所有解释都藏在视频帧里；Scrollama/ScrollTrigger 触发后没有静态 fallback；移动端双栏 sticky 直接缩小导致文字挤压；reduced-motion 仍启用 smooth scroll；滚动监听每帧 setState；路由切换后 observer 或 RAF 继续运行。

案例分析

Scrollama 的官方仓库把它定位为基于 IntersectionObserver 的轻量 scrollytelling 库，并说明目标是用简单接口创建滚动交互、减少直接滚动事件带来的性能复杂度。The Pudding 对 Scrollama 的介绍把常见模式拆成 step trigger、step progress 和 sticky graphic。Awwwards 的 Dayos 页面获得 2025-05-29 Site of the Day，列出 scroll scrubbed video、form transition、storytelling 和 CTA 等元素，并说明产品语境是用 operational AI 连接多云系统。可学习点是：滚动动效可以解释抽象企业 AI 工作流，但它必须围绕章节、状态和行动，而不是围绕“滚动很酷”。

来源链接

Scrollama GitHub: https://github.com/russellsamora/scrollama The Pudding Scrollama introduction: https://pudding.cool/process/introducing-scrollama/ MDN Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API Awwwards Dayos: https://www.awwwards.com/sites/dayos MDN prefers-reduced-motion: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/%40media/prefers-reduced-motion