如何使纯 CSS 视差代码适用于复杂站点？

Question

我正在尝试对我的网站应用复杂的视差效果。背景图像应位于整体内容的后面，并且移动速度应比主要内容慢。我尝试了很多方法来实现此功能，但都不起作用。

所以，据我了解，我需要先创建一个视差包装器。

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

这个包装器有一个透视图，它隐藏了 x 溢出并设置了整体内容的高度。它将在 body 标签之后设置。然后，我有一个部分应该有一个背景，它是 parallax-wrapper 的直接子元素：

    .latest_news_section {
        display: flex;
        flex-direction: column;
        height: 390px;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
    }

本节只是对内容进行格式化和塑造。然后，我应用 Z 平面的移动以确保内容在后面并且滚动速度较慢：

    .latest_news_section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        transform-origin: center;
        background-image: url("../img/top-back.jpeg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        transform: translateZ(-5px) scale(2);
    }

但是，仅当我从该部分禁用 overflow: hidden; 时，视差才开始起作用。我不知道为什么。但是，我的同事测试了相同的代码并且有效。

请检查下面我的版本：

HTML:

.parallax-wrapper {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  perspective: 10px;
  transform-style: preserve-3d;
}

.latest_news_section {
  display: flex;
  flex-direction: column;
  height: 390px;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

.latest_news_section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  transform-origin: center;
  background-image: url("https://www.freecodecamp.org/news/content/images/size/w2000/2021/06/w-qjCHPZbeXCQ-unsplash.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: 1s;
  transform: translateZ(-5px) scale(2);
  transform-style: inherit;
}
.latest_news_section_header {
  font-family: AdobeInvisFont, OpenSans, Courier;
  font-size: 27px;
  color: rgba(255, 255, 255, 255);
  text-align: center;
  margin-bottom: 55px;
}

button {
  border: none;
  font-family: AdobeInvisFont, Courier, OpenSans-Semibold;
  font-size: 18px;
  color: rgba(255, 255, 255, 255);
  text-align: center;
  height: 55px;
  width: 170px;
  border-radius: 5px;
  cursor: pointer;
}

.green {
  background-color: #89ca62;
  margin-right: 20px;
}

.blue {
  background-color: #14b9d5;
}

.some-content-to-fill {
  height: 1000px;
  z-index: 2;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./css/style.css" />
  <title>Document</title>
</head>

<body>
  <div class="parallax-wrapper">
    <div class="latest_news_section">
      <h1 class=".latest_news_section_header">
        THE LATEST NEWS ON DESIGN & ARCHITECTURE
      </h1>
      <div class="heading-buttons container">
        <button class="green">Subscribe Now</button>
        <button class="blue">Best Articles</button>
      </div>
    </div>

    <p class="some-content-to-fill">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi temporibus debitis deleniti velit suscipit est aliquid voluptates voluptatem, consequatur ratione, minima autem ex inventore reiciendis commodi, harum repellendus nam! Cupiditate,
      amet expedita! Est beatae ut illum voluptatum quod nesciunt, similique minus labore consequuntur, nostrum ad ducimus libero eveniet aperiam recusandae, dignissimos totam quas ipsum explicabo! Dolore cupiditate expedita quisquam quis doloribus dolorum
      laborum ad excepturi odit cumque praesentium, quasi neque quia totam ea officia quibusdam nostrum, libero, eaque atque!
    </p>
  </div>
</body>

</html>

谢谢。我试图得到这个太长时间了，我不知道为什么它在没有 overflow: hidden 禁用的情况下不起作用。谢谢。

Answer 1

使用 overflow: hidden;
时禁用滚动你需要做的：

.parallax-wrapper::-webkit-scrollbar {
display: none;
}

如何使纯 CSS 视差代码适用于复杂站点？

How to make pure CSS parallax code work with complex site?

html

css

styles

background

parallax