COMPONENT 78 · Motion & Interaction

视差滚动

Parallax Scrolling

也叫ParallaxScroll Depth滚动视差

滚动时让前景与背景以不同速度移动，营造深度。

Moves foreground and background at different speeds during scroll to suggest depth.

ANATOMY & USAGE

结构与使用建议

组成部分

滚动容器
前景层
背景层

适合使用

品牌叙事需要少量非关键深度效果时。

不建议使用

内容密集、性能受限、易晕动或动效妨碍阅读时。

键盘与无障碍

减少动态偏好下停用；不改变阅读顺序，避免大幅持续移动与滚动劫持。

DESCRIBE IT TO AI

这样告诉编程助手

实现视差滚动（Parallax Scrolling）：滚动时让前景与背景以不同速度移动，营造深度。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<section class="demo parallax" tabindex="0" aria-label="视差滚动示例">
  <div class="parallax-layer" aria-hidden="true">
  </div>
  <div class="parallax-content">
    <h2>山间旅程</h2>
    <p>滚动这个区域，背景会以较慢速度移动。</p>
  </div>
</section>