使用 CSS 和 JavaScript 创建一个非常简单的视差效果

在这个教程中，我们将学习为英雄图像添加一个简单但有用的视差滚动效果。为了实现它，我们将使用一些 javascript 代码，但请记住，您可以通过组合 3D 变换来创建纯css 视差网站。

使用 CSS 和 JavaScript 创建一个非常简单的视差效果第1张

这是我们要构建的页面。向下滚动！

See the Pen A Very Simple Parallax Effect With CSS & JavaScript by Envato Tuts+ (@tutsplus) on CodePen.

让我们分三个基本步骤来构建它：从标记开始，然后是样式，然后是行为 JavaScript。

1.从 html 标记开始

页面标记由两部分组成。第一部分包含英雄图像及其子元素，而第二部分包含页面的主要内容：

<section class="banner" data-direction="down" data-speed="0.6">
  <h1 class="banner-title" data-direction="up" data-speed="0.25">...</h1>
  <p class="banner-subtitle" data-direction="up" data-speed="0.35">...</p>
  <img class="skiing" src="IMG_SRC" alt="" data-direction="up" data-speed="0.85">
</section>

<section class="content">
  <div class="container">...</div>
</section>

注意分配给第一部分元素的data-direction 和 custom 属性。data-speed这些元素是视差元素，它们的属性值将决定它们在视差滚动期间的行为。一分钟内了解更多信息！

2. 添加CSS

接下来，我们将为我们的页面指定一些 CSS 规则。没有什么真正重要的，只是一些可以增强页面布局的基本内容：

body {
  font: 20px/1.6 sans-serif;
}

.banner {
  position: relative;
  height: 100vh;
  background: #ededed url(IMG_SRC) no-repeat center/cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.banner > *:not(.skiing) {
  font-weight: 900;
  letter-spacing: -0.05em;
  padding: 5px 15px;
  background: #ffc844;
}

.banner-title {
  font-size: 3em;
  margin-bottom: -0.5em;
  transform: rotate(-6deg);
}

.banner-subtitle {
  font-size: 1.5em;
  box-shadow: -15px -15px 15px rgba(0, 0, 0, 0.07);
  transform: rotate(-3deg);
}

.skiing {
  position: absolute;
  right: 40px;
  bottom: 20px;
  max-width: 150px;
}

.content {
  position: relative;
  padding: 20px 0;
  background: white;
}

.container {
  max-width: 1100px;
  padding: 0 15px;
  margin: 0 auto;
}

.content p + p {
  margin-top: 25px;
}

@media screen and (max-width: 500px) {
  body {
    font-size: 14px;
  }

  .skiing {
    right: 20px;
    max-width: 100px;
  }
}

3. 应用 javaScript

为了创建视差效果，我们将监听scroll事件。

每次滚动页面时，我们都会遍历视差元素并执行以下操作：

我们检索它们的data-speed属性值并将其乘以文档垂直滚动的像素数。这给了我们每个视差元素运行的速度。例如，data-speed = 1意味着一个元素将与页面内容一样快地移动。另一方面，元素的 data-speed = 0.5 移动速度比页面滚动慢 50%。
我们检索其 data-direction 属性的值。此属性指定页面滚动时视差元素将移动的位置。可能的值为up和down。例如，data-direction = "up"意味着一个元素将向上移动。在我们的例子中，除了图像之外的所有东西都会向上移动。
根据它们的属性值，我们使用该translate3d()函数向上或向下移动元素。

下面是相应的 JavaScript 代码：

const parallaxEls = document.queryselectorAll("[data-speed]");

window.addeventListener("scroll", scrollHandler);

function scrollHandler() {
  for (const parallaxEl of parallaxEls) {
    const direction = parallaxEl.dataset.direction == "up" ? "-" : "";
    const transformY = this.pageYOffset * parallaxEl.dataset.speed;
    if (parallaxEl.classList.contains("banner-title")) {
      parallaxEl.style.transform = `translate3d(0,${direction}${transformY}px,0) rotate(-6deg)`;
    } else if (parallaxEl.classList.contains("banner-subtitle")) {
      parallaxEl.style.transform = `translate3d(0,${direction}${transformY}px,0) rotate(-3deg)`;
    } else {
      parallaxEl.style.transform = `translate3d(0,${direction}${transformY}px,0)`;
    }
  }
}