滚动驱动动画
Scroll-driven Animation
别名:滚动驱动动画滚动动画随滚动动滑到哪动到哪scroll animationscroll-drivenscroll-linked animation
这是什么
动画进度绑定滚动位置而非时间：滚到哪、动到哪，可来回擦洗。能做滚动进度条、随滚动展开的叙事与视差层。与滚动显现不同，它不是触发后播完，而是由滚动位置精确擦洗进度。
交互实验室
试一试，再决定怎么用正在加载演示…
✓ 适用场景
- 叙事随滚动展开，进度要与阅读位置同步
- 需要滚动进度指示或阅读深度反馈
- 视差层、粘性章节等空间层次表达
✕ 不适用场景
- 用户一滚到底找信息，动画反而拖慢到达
- 滚动容器嵌套复杂，进度归属不清
- 只需一次性入场，用滚动显现更简单
常见形式
滚动联动
Scroll-linked
进度直接映射滚动位置，可逆向擦洗
滚动触发
Scroll-triggered
越过阈值后按时间播完，不再随滚动
视差层
Parallax layers
多层不同速率移动，制造纵深
实现要点
animation-timeline: scroll()animation-rangetransform: translateYprogress首选 CSS：animation-timeline: scroll() + animation-range 把关键帧绑到滚动进度；不支持时用 JS 滚动监听写 CSS 变量（如 --scroll），再由 calc 驱动 transform/opacity。触发式部分的定时 动画仍需 calc(<时长> * var(--demo-speed, 1))。滚动监听要 passive + rAF 节流。 尊重 prefers-reduced-motion，直接落到终态。
平台 API
animation-timeline: scroll()scroll()Intersection Observer交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
在当前项目中实现滚动驱动动画。 先检查现有组件体系和 Design Token，优先复用当前组件。 保持现有项目视觉风格。不要新增不必要依赖。 要求： - 动画进度绑定滚动位置，可反向擦洗 - 优先使用 animation-timeline: scroll()，并提供 JS 兜底 - 定时动画时长写 calc(<时长> * var(--demo-speed, 1)) - 尊重 prefers-reduced-motion 完成后运行项目现有检查，并列出修改的文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
元素滚动进入视口时才播放淡入、上浮或滑入动画，之前保持隐藏或占位。 把"一次性呈现全部内容"变成"随阅读节奏逐段揭示"，让长页面的信息 更有秩序感。通常由 IntersectionObserver 触发，只播一次。
动效替代方案滚动时不同图层以不同速度移动——背景慢、前景快—— 用速度差制造纵深。 是"2D 里伪造 3D"最便宜的手段， 常见于首屏大图与滚动叙事页面。
动效替代方案把标题或段落按行、按词逐个显现，而不是整块淡入。文字"被说出来"的节奏感让信息有先后与分量， 常用于落地页首屏大标题、章节开场与滚动叙事， 通常进入视口时触发一次。
动效搭配使用