技术求助：如何实现类似delassus.com的Horizontal parallax滚动效果？

核心原理拆解 #

水平视差的关键是滚动触发元素水平位移，给不同层级的元素设置不同的移动速度（比如背景慢、前景快），以此营造空间层次感。

基础实现步骤 #

• HTML分层结构：把视差元素按层级包裹，给每个层级加专属类名方便控制，例如.parallax-bg（背景层）、.parallax-content（内容层）、.parallax-fg（前景层）。
• CSS基础配置：
  • 给视差容器设置足够的垂直高度（比如height: 200vh），确保有足够的滚动空间触发效果。
  • 视差元素设置position: fixed或absolute（根据布局需求调整），初始位置用left: 0或transform: translateX(0)固定。
• JavaScript滚动监听：
  • 监听scroll事件，获取当前滚动距离window.scrollY。
  • 给不同层级计算位移值：比如背景层位移 = -scrollY * 0.2，内容层 = -scrollY * 0.5，前景层 = -scrollY * 0.8（负号让元素与滚动方向反向移动，形成视差效果）。
  • 用element.style.transform = \translateX(${位移值}px)``更新元素位置。

简化示例代码 #

HTML #

<div class="parallax-container">
  <div class="parallax-bg">背景层</div>
  <div class="parallax-content">核心内容</div>
  <div class="parallax-fg">前景装饰</div>
</div>
<div class="normal-content">
  <!-- 此处填充足够内容撑高页面，让滚动操作生效 -->
</div>

CSS #

.parallax-container {
  position: relative;
  height: 200vh;
  overflow: hidden;
}

.parallax-bg, .parallax-content, .parallax-fg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.parallax-bg {
  background-color: #eee;
}

.parallax-content {
  color: #333;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.parallax-fg {
  background-color: rgba(255, 100, 100, 0.2);
}

.normal-content {
  height: 100vh;
  background-color: #fff;
}

JavaScript #

const bg = document.querySelector('.parallax-bg');
const content = document.querySelector('.parallax-content');
const fg = document.querySelector('.parallax-fg');

window.addEventListener('scroll', () => {
  const scrollY = window.scrollY;
  
  bg.style.transform = `translateX(${-scrollY * 0.2}px)`;
  content.style.transform = `translateX(${-scrollY * 0.5}px)`;
  fg.style.transform = `translateX(${-scrollY * 0.8}px)`;
});

优化注意事项 #

• 性能优化：滚动事件触发频率高，建议用requestAnimationFrame包裹位移更新逻辑，避免页面卡顿：

  window.addEventListener('scroll', () => {
    requestAnimationFrame(() => {
      // 位移计算代码
    });
  });
  

• 边界控制：如果元素宽度较大，需计算最大位移值，避免滚动到底部时元素完全移出可视区域。
• 响应式适配：针对不同屏幕尺寸调整位移速率，防止移动端出现效果异常。
• 放弃直接复制源码：目标网站的404问题多是因为资源用了相对路径，本地无法加载；且网站可能有资源保护机制，自己实现核心逻辑反而更可控。

内容的提问来源于stack exchange，提问作者Richard Coopmans