CSS完成视差滚动效果

视差滚动效果是一种常见的网页设计技术，通过巧妙的背景图层移动方式，可以使滚动时，页面上的元素以不同速度进行滚动，增加页面的动感和立体感。本文将介绍如何使用 CSS 来实现视差滚动效果。

1. 分层结构

实现视差滚动效果的关键在于将页面内容分为多个层次，并对每个层次应用不同的滚动速度。我们首先需要为每个层次创建一个容器，并将其设置为绝对定位，通过设置不同的 top 和 left 值来确定每个容器在页面的位置。

<div id="parallax-container">
  <div class="layer layer1"></div>
  <div class="layer layer2"></div>
  <div class="layer layer3"></div>
</div>

2. CSS 样式

接下来，我们需要为每个层次的容器设置 CSS 样式。我们可以为每个容器设置不同的尺寸、背景图片和滚动速度，以实现不同层次之间的差异效果。

.layer {
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.layer1 {
  background-image: url("layer1.jpg");
  transform: translateZ(0px) scale(1.2);
}
.layer2 {
  background-image: url("layer2.jpg");
  transform: translateZ(-50px) scale(1.1);
}
.layer3 {
  background-image: url("layer3.jpg");
  transform: translateZ(-200px) scale(1.05);
}

上述代码中，我们为每个容器设置了不同的背景图片，并通过 transform 属性控制了每个层次的滚动速度。translateZ 属性用于控制层次的纵向位移，而 scale 属性用于控制层次的缩放比例。

3. JavaScript 实现滚动效果

为了实现滚动效果，我们需要使用 JavaScript 监听滚动事件，并根据滚动位置来计算每个层次的位移。我们可以使用如下的 JavaScript 代码来实现：

window.addEventListener("scroll", function() {
  var scrolled = window.scrollY; // 当前滚动值
  var layer1 = document.querySelector(".layer1");
  var layer2 = document.querySelector(".layer2");
  var layer3 = document.querySelector(".layer3");
  layer1.style.transform = "translateY(" + (scrolled * 0.6) + "px)";
  layer2.style.transform = "translateY(" + (scrolled * 0.4) + "px)";
  layer3.style.transform = "translateY(" + (scrolled * 0.2) + "px)";
});

上述代码中，我们使用 `window.scrollY` 属性获取当前滚动值，并根据滚动值来计算每个层次的位移。通过修改 `layer.style.transform` 属性的值，我们可以实现每个层次的滚动效果。

4. 结语

通过使用 CSS 和 JavaScript，我们可以轻松实现视差滚动效果。通过分层结构和巧妙的位移计算，我们可以为网页添加更多动感和立体感。希望本文能对你理解和应用视差滚动效果有所帮助。

参考资料：

- [MDN: CSS Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms)

- [MDN: window.scrollY](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY)