视差滚动

什么时候用

• 首屏头图想比正文走得慢一点，制造「往里走」的感觉
• 多图层插画、品牌页、活动页，想用层次代替真 3D
• 卡片列表滚过时让背景或图片轻微错位，增加质感

适用场景：滚动 / 页面 / 卡片

推荐取值

前后景速度比

0.3–0.6（背景慢、前景快）

单层最大位移

不超过容器高度的 50%

层级数量

2–4 层，再多看不出区别

驱动方式

requestAnimationFrame 或 animation-timeline: scroll()

别搞混

• 和「fixed 背景」的区别

  background-attachment: fixed 是背景相对视口钉住不动，只有一层；视差是每一层用各自的 transform 速度移动，可以有三四层，而且能被 JS 控制。

• 和「滚动驱动动画 scroll-driven」的区别

  视差只管「位移随滚动线性变化」；滚动驱动动画可以把滚动进度映射到任意属性（旋转、缩放、颜色），还能用 animation-range 控制起止区间。

容易踩的坑

• 位移距离给太大会让人晕，前后景速度差控制在 20%–50% 就够，超过就没法读内容
• scroll 监听里直接读 scrollY 会抖动，用 requestAnimationFrame 节流或 CSS 的 animation-timeline: scroll()
• 移动端和 prefers-reduced-motion 下最好直接关掉，iOS 的滚动回弹会让视差明显跳一下
• 给它加 will-change: transform 只在动画期间加，常驻会一直占着合成层显存

无障碍降级

prefers-reduced-motion: reduce 时把位移速度全部置 0，让所有图层停在原位，页面照常可读。

关键词

• parallax scrolling
• transform: translate3d
• will-change: transform
• animation-timeline: scroll()
• background-attachment: fixed
• scroll-linked

参考

• MDN · translate3d()
• MDN · animation-timeline

相关展品

• M-06滚动驱动动画Scroll-Driven Animation
• M-04滚动揭示Scroll Reveal
• V-01毛玻璃Frosted Glass