SCROLL EFFECT
视差滚动Parallax Scrolling
背景、中景、前景以不同速度滚动，制造肉眼可感的纵深。
效果预览
背景 0.3× / 中景 0.6× / 前景 1×
不同层以不同速度滚动
适合用在哪
Hero 区、品牌故事页、游戏与创意官网。
容易踩的坑
- 在 scroll 事件里直接改 top 或 background-position，每帧重排导致严重卡顿。
- 背景层速度系数过大且移动幅度超过 100px，容易引发晕动症，必须尊重减弱动效偏好。
- 图层位移后露出容器边缘，背景图没有预留足够的超出尺寸。
设计提示词 · Prompt
视差滚动（Parallax Scrolling）：至少三层——背景层以 0.2-0.4 倍速、中景 0.6 倍速、前景 1 倍速随滚动移动。实现：监听 scroll，对每层设 transform:translate3d(0, scrollY * 系数, 0)（务必用 transform 而非 top，且加 will-change:transform）。更现代的方案是 CSS animation-timeline:scroll()。悬停视差（鼠标视差）用 mousemove 让各层按指针偏移 2-6% 平移。层次元素大小要悬殊（近大远小）+ 前景层加投影，深度感才明显。移动端降级为静态或仅保留两层。
Parallax Scrolling: at least three layers — the background layer moves at 0.2-0.4x speed, the midground at 0.6x, and the foreground at 1x with scrolling. Implementation: listen to scroll and set transform:translate3d(0, scrollY * factor, 0) on each layer (always use transform rather than top, and add will-change:transform). A more modern approach is CSS animation-timeline:scroll(). Hover parallax (mouse parallax) uses mousemove to shift each layer by 2-6% according to the pointer offset. Layer elements should differ greatly in size (near large, far small) + the foreground layer gets a drop shadow for the depth to be noticeable. On mobile, degrade to static or keep only two layers.
常见搭配
同一页面里经常和「视差滚动」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s s--abs d-parallax"> <span class="d-parallax__tag">背景 0.3× / 中景 0.6× / 前景 1×</span> <div class="d-parallax__mid"></div> <div class="d-parallax__front"></div> <div class="d-parallax__card">不同层以不同速度滚动</div> </div>