css背景视差_快速提示：使用CSS和JavaScript创建非常简单的视差效果

css背景视差

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

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

让我们以三个基本步骤构建它：从标记开始，然后是样式，然后是行为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和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)`;
    }
  }
}

结论

而已！ 在这个快速提示中，我们仅用几行JavaScript就创建了一个非常简单的视差滚动效果。 再次，正如已经讨论过的，这是一个基本演示，可能并不适合所有视差情况。

视差效果当然可以为您的网站增添个性，但浏览器可能必须执行“昂贵”的任务来构建它们，从而耗尽资源并影响性能。 在实现视差期间，请务必考虑到性能 。

但是，如果您想创建更高级的视差体验，则可以看一下其中存在的一些JavaScript库，例如parallax.js 。

一如既往，感谢您的阅读！

翻译自: https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-build-a-dead-simple-parallax-effect-with-css-javascript--cms-33061

css背景视差