视差滚动
Parallax Scrolling
中级网页App视差滚动（Parallax Scrolling）是滚动页面时，让背景、中景、前景以不同速度移动，模拟近处快、远处慢的景深效果。品牌官网的首屏常用它营造空间感；用得克制时很有氛围，用过头会让人头晕、读不下去。
你可能会说：「官网首屏能不能做成往下滚的时候，背景的山比前面的树走得慢，有一种立体的感觉？」
读之前建议先了解
动手看看近处快、远处慢
要点视差滚动是怎样起作用的？
- 1
近处快、远处慢
坐车时窗外近处的树飞快掠过，远处的山几乎不动，这就是视差。网页里把画面拆成几层，前景和页面一起滚动，越远的层往回补偿得越多、看起来移动得越慢。比如页面滚了 100 像素，天空只移动 15 像素，远山 35 像素，近山 65 像素，树林 100 像素，眼睛就会觉得画面有了深度。
- 2
只动装饰层，文字正常滚
视差只适合装饰性的背景图层。标题、正文、按钮如果也跟着视差移动，就会和页面其余部分错位，往下滚时越走越慢、被下面的内容盖住，眼睛得追着读。实现时只改 transform（translateY），不要改 top、margin 这类会引发重新排版的属性，否则滚动会卡顿；能用 CSS 的滚动驱动动画实现时，比在 scroll 事件里逐帧计算更省性能。
- 3
强度要克制，并尊重减少动效
速度差太大时，远景几乎不动、前景飞快掠过，层与层之间还会露出空缝，滚一点就晃得厉害。视差应该是「隐约觉得有景深」的程度。大幅的视差运动会让一部分人头晕恶心，系统开启减少动态效果的用户应该看到所有层一起滚动的静态版本。在手机上滚动本来就快，很多网站会直接关掉视差。
容易混淆的地方
视差滚动是「多个图层按不同速度随滚动移动」；滚动驱动动画是更广的概念，任何属性的动画进度都可以绑定到滚动位置，视差只是其中一种。它也不是固定背景（background-attachment: fixed）：固定背景是背景完全不动、内容从上面滑过，只有一层，没有多层之间的速度差。
什么时候用
适合用
- 户外、旅行、游戏类品牌官网的首屏插画，分层做出景深，营造氛围。
- 产品发布页的大图背景，滚动时背景比文字移动得稍慢，增加层次。
- 年度报告、专题页这类讲故事的长页面，在章节之间用视差插画过渡。
不适合用
- 后台、文档、表单这类以阅读和操作为主的页面，别加视差；直接正常滚动。
- 正文、价格、按钮等需要读或点的内容，别让它们跟着视差移动；只让背景图层视差。
- 页面在低端手机上已经卡顿时，别再加逐帧计算的视差；先解决性能问题或关掉视差。
练一练选一个答案，看看解释
你给户外品牌官网首屏做了视差：天空、山、树分层移动，标题也跟着慢慢下沉。用户反馈标题读着累。怎么改最合适？
让 AI 帮你做复制给 AI Agent 直接用
请给【需要景深感的区域，如：官网首屏的分层插画】加上视差滚动。先阅读这个区域的结构和图片素材，确认有哪几层，以及项目里已有的滚动或动画写法。要求：只让装饰图层视差，越远的层移动越慢（如前景 1 倍、远景 0.2~0.4 倍），标题、正文和按钮跟页面正常滚动；只改 transform，不改 top 或 margin，优先用 CSS 滚动驱动动画，不支持时再用脚本并做节流。开启减少动效时所有层一起滚，窄屏手机上可以关闭。沿用现有写法，不改无关代码。最后说明怎样验证：滚动流畅不掉帧，层与层之间没有露出空缝。