展现形式 · 概念
Scroll Reveal：滚动触发动效
说明元素滚动进入视口时淡入、视差与粘性叙事的适用边界，依据 WCAG 2.3.3、Technique C39、MDN 与 web.dev 核对 prefers-reduced-motion、内容默认可见、首屏不延迟、CLS 与动画性能要求，并区分 Marquee 与 Carousel。
Scroll Reveal 让元素在用户滚动、进入视口时以淡入、位移或缩放的方式出现，常见变体有视差（背景与前景以不同速度移动）和粘性叙事（容器固定，滚动推动内部内容变化）。运动由用户自己的滚动触发、通常只发生一次；持续自行循环的运动属于 Marquee。
适合与不适合
适合长篇叙事页中作为节奏提示：品牌故事分段、产品特写逐步展开、数据段落进入视野。不适合首屏主内容、价格、库存、政策、促销条件、表单与任何必须一眼看到的信息；也不应为了掩盖内容空洞而添加。判据是：删除全部动效后页面是否仍完整可读。
与相邻模式的区别
| 对照 | 判据 |
|---|---|
| Marquee | Marquee 自动持续运动，无需用户输入；Scroll Reveal 由滚动触发，停止滚动就停止 |
| Carousel | Carousel 在固定区域内切换离散项目，需要按钮与位置状态；Scroll Reveal 不改变内容的可达性，只改变出现方式 |
| Timeline | Timeline 表达顺序与阶段关系，可以静态呈现；粘性叙事借滚动推进内容，二者可结合，但顺序必须在静态形态下仍成立 |
优点与缺点
| 优点 | 缺点 |
|---|---|
| 引导阅读节奏，强调段落切换 | 动效本身不提供信息，滥用会分散注意 |
| 由用户滚动驱动，节奏由用户决定 | 视差与大幅位移可能引发前庭不适 |
| 观察器与合成层动画的成本较低 | 实现不当会隐藏内容、推迟首屏或造成布局抖动 |
内容与交互要求
- 默认可见：内容的基础状态必须是已显示。初始隐藏样式只应在脚本确认运行、观察器可用时才添加，脚本失败、打印和被禁用动画时内容都完整存在。
- 一次性：元素显示后停止观察，不要随滚动反复隐藏与显示。
- 克制：位移幅度小、总延迟短，不让顾客等动画结束才能读到内容；不要用交错延迟串联大量元素。
- 粘性叙事：固定容器占用视口高度，滚动劫持会让键盘与触摸用户难以离开该区域；每个步骤的文字应在静态版本中按同一顺序出现。
- 数字计数动画：最终数值必须本来就在 DOM 中，动画只是过渡，不应制造尚未达到的数字。
响应式与无障碍
- WCAG 2.3.3 Animation from Interactions（AAA）：正文写明由交互触发的运动动画可以被关闭，除非动画对功能或信息是必要的；理解文档以视差滚动为例，说明部分用户会因动画感到分心或恶心。该准则等级为 AAA，不属于常见的 AA 达标基线，但对电商长页仍是值得遵循的目标。
- Technique C39（Using the CSS prefers-reduced-motion query to prevent motion）：官方列为 2.3.3 的充分技术，另有 SCR40（在 JavaScript 中使用同一查询）与 G 类技术（允许用户设置偏好）。C39 给出两种写法：在
prefers-reduced-motion: reduce内关闭运动，或把静态样式作默认、仅在no-preference内添加运动；后者更安全。 - MDN：
reduce表示用户偏好被移除、减少或替换的运动；MDN 强调是“减少”而非全部取消，例如把缩放换成较柔和的透明度过渡，并把大对象缩放、平移、视差与变焦转场列为易引发前庭不适的类型。脚本用matchMedia("(prefers-reduced-motion: reduce)")读取同一偏好。 - 辅助技术：仅以样式隐藏的元素仍会被读取，视觉延迟不应成为朗读顺序的依据；不要靠动画出现来传达状态变化。
- 触摸与小屏：视差层在小屏尺寸下应停用，避免位移造成内容与背景错位或裁切。
内容与性能
- 首屏不延迟：Google 懒加载页建议不要对打开页面时很可能立即可见的内容做延迟加载；web.dev LCP 页写明，不透明度为 0 的不可见元素被排除在 LCP 候选之外（Chromium 启发式）。据此推断，主图与首屏标题以透明起始，可能推迟其被计入的时间点；首屏主内容不要走 Scroll Reveal。LCP 目标为第 75 百分位不超过 2.5 秒。
- CLS：web.dev 写明 CLS 目标为第 75 百分位不超过 0.1，超过 0.25 为差；只有意外的位置变化才计入。动画用
transform的translate()、scale()，不要改动top、left、width、height。 - 动画属性：web.dev 动画指南建议把动画限制在
opacity与transform，以留在合成阶段；will-change只在确有问题时使用。 - 触发机制：MDN 说明 Intersection Observer 可异步检测元素进入视口，用于懒加载、无限滚动与显现动画，无需监听 scroll 事件。
- CSS 滚动驱动动画：MDN 介绍了
animation-timeline的scroll()与view()，其示例包含@supports not回退，但该页未写明浏览器支持状态；采用前需另查兼容性并保留静态回退。 - 抓取：Google 懒加载页写明其方法不依赖滚动或点击，因为 Google Search 不与页面交互。已存在于初始 HTML 但样式初始透明的内容如何被处理，本次未核验；稳妥做法是内容本就存在且默认可见。
状态与退化
零项时没有可显现内容，不渲染包裹层；一项也直接静态显示。观察器不可用、脚本出错或无 JavaScript 时内容全部显示；打印时取消初始隐藏；减少动态效果时取消位移与视差，仅保留必要的透明度过渡或直接显示。滚动很快跳过时，元素应立即到位，不排队播放。
常承载的内容与模块
适合承载叙述性内容，例如品牌故事的分段、产品展示的特写。证明指标可以用，但数值必须一开始就在页面里。Hero 与 Banner 位于首屏，默认不使用。
平台落点
不同平台主题是否内置滚动动效、怎样受 prefers-reduced-motion 控制，需按固定主题版本源码核验；本篇未核验 Dawn、Horizon 或其他主题的具体实现，不作断言。
发布前检查
- 关闭 JavaScript、打印与减少动态效果后，内容是否完整可读？
- 首屏内容是否没有初始透明或延迟？
- 是否用
transform与opacity，且没有引起意外布局位移？ - 视差与粘性区域在小屏、键盘与屏幕阅读器下是否可离开、可阅读？
- 动效是否只在装饰或强调，不承载价格、政策或状态？
固定版本主题实现
- Dawn 内容分区与动效：Dawn 含滚动触发动画脚本（
animations.js），具体设置与prefers-reduced-motion处理见该文。 - Horizon 跑马灯、轮播与动效：Horizon 全仓库搜索未找到 parallax、scroll-reveal 等滚动显现相关实现。
固定基线为 Dawn v15.3.0 与 Horizon 4.2.0；结论限于这两个提交，均为静态源码分析，未运行验证。
待继续完善
- 在真实设备与系统“减少动态效果”设置下复测；
- 补充粘性叙事的可访问实现与替代版本；
- 核验主流主题的滚动动效实现与开关；
- 核验爬虫对初始透明内容的处理。