垂直视差滑块 codepen

此处介绍的是一种在 Codepen 上可以找到的垂直视差滑块效果。垂直视差（Vertical Parallax）通常指的是页面元素在垂直方向上的滚动时，不同的元素以不同的速率滚动的效果。这种效果可以增强用户与页面的交互，给用户带来更好的体验。

介绍

这个垂直视差滑块效果包含了多个层次的背景图片以及文字元素。随着页面的滚动，背景图片和文字元素以不同的速率滚动，从而实现了垂直视差的效果。

使用

在 Codepen 上，使用这个垂直视差滑块效果非常简单。只需要将 HTML、CSS 和 JavaScript 代码复制到您的项目中即可。

HTML

<section class="parallax">
  <div class="parallax__group">
    <div class="parallax__layer parallax__layer--back">
      <!-- 背景图片 -->
      <div class="background"></div>
    </div>
    <div class="parallax__layer parallax__layer--base">
      <!-- 文字元素 -->
      <h2>这是一个标题</h2>
      <p>这是一段文字</p>
    </div>
  </div>
</section>

在 HTML 中，将背景图片和文字元素分别放在不同的 div 中，这样在 CSS 中才能分别设置它们的样式。

CSS

.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.parallax__group {
  position: relative;
  height: 100vh;
  transform-style: preserve-3d;
}

.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.parallax__layer--back {
  transform: translateZ(-2px) scale(3);
}

.parallax__layer--base {
  transform: translateZ(0);
}

在 CSS 中，设置了一些全局样式以及用来实现垂直视差效果的样式。其中，perspective 属性用于设置元素的透视效果，transform-style 属性用于指定如何在 3D 空间中显示子元素，transform 属性用于设置元素的旋转、偏移、缩放等样式。

JavaScript

const parallax = document.querySelector(".parallax");

window.addEventListener("scroll", function () {
  const offset = window.pageYOffset;

  parallax.style.transform = `translateY(${offset * 0.5}px)`;
});

在 JavaScript 中，监听了页面的滚动事件，并在滚动时设置了元素的 transform 样式，从而实现了垂直视差的效果。在具体的实现过程中，需要计算滚动偏移量，并将其乘以一个系数，以控制元素的滚动速度。

总结

这个垂直视差滑块效果展示了如何使用 HTML、CSS 和 JavaScript 实现垂直视差效果。通过设置透视效果、变换属性等样式，以及监听页面滚动事件，可以实现类似的效果。这种效果可以为网站增加交互性，提升用户体验。