视差滚动
Parallax
别名:视差滚动背景慢速滚动分层滚动视差效果
这是什么
滚动时不同图层以不同速度移动——背景慢、前景快—— 用速度差制造纵深。 是"2D 里伪造 3D"最便宜的手段， 常见于首屏大图与滚动叙事页面。
交互实验室
试一试，再决定怎么用正在加载演示…
✓ 适用场景
- 首屏大图或插画需要纵深与电影感
- 滚动叙事页面，图层分段讲述
- 装饰性背景纹理缓慢移动
✕ 不适用场景
- 长文阅读页面（滚动与文字错位致晕）
- 移动端大规模视差（性能差且眩晕）
- 视差影响可读性或遮挡操作目标
常见形式
背景减速
Slow background
背景以 0.3～0.5 倍速滚动，最常用
多层深度
Multi-layer
三层以上不同速率，纵深更强
滚动驱动动画
Scroll-driven
animation-timeline: scroll() 绑定滚动进度
实现要点
transform: translateY(scrollY * factor)rAF throttleanimation-timeline: scroll()will-change: transform传统法监听 scroll，在 rAF 里对每层执行 translateY(scrollTop * factor)， factor 小于 1 为慢层（背景 0.3、前景 1.2）； 现代法用 CSS scroll-driven animations（animation-timeline: scroll()）。 只动 transform 走合成层； 移动端与 prefers-reduced-motion 默认关闭。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
为项目首屏添加视差滚动效果。 先检查首屏结构与滚动容器，确认性能预算。 要求： - 分层不同速率，只动 transform（合成层） - rAF 节流或 CSS scroll-timeline 实现 - 不影响可读性与滚动性能（避免 scroll 监听重排） - 移动端与 reduced-motion 默认关闭 - 不引入新依赖 完成后运行现有检查，说明修改文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
元素滚动进入视口时才播放淡入、上浮或滑入动画，之前保持隐藏或占位。 把"一次性呈现全部内容"变成"随阅读节奏逐段揭示"，让长页面的信息 更有秩序感。通常由 IntersectionObserver 触发，只播一次。
动效相似概念围绕单一转化目标纵向组织信息的营销页面：顶部导航与 Hero 主视觉先讲清楚"这是什么、好在哪"， 中段用功能区、信任区（客户 logo、评价、数据）逐层打消顾虑，末端以强视觉的行动按钮收口。 页面按说服顺序分区，每一屏都在回答用户下一步的疑问。
页面搭配使用把页面当作杂志版面经营的视觉语言：衬线大标题、首字下沉、细分栏、章节 编号与发丝分隔线，图文穿插而节奏如翻页。黑白灰为底、衬线与无衬线搭配， 用版式语言讲故事，而非用装饰堆砌氛围。
风格搭配使用用大面积流动渐变光斑营造氛围的视觉语言：青绿 紫 蓝 多色模糊色块在背景 中缓慢漂移融合，前景内容保持极简克制。色彩是主角——像极光一样柔和 跨 色相 渐次过渡，界面因此获得呼吸感与情绪温度。
风格搭配使用