css - 如何只用css3实现视差？

Question

我正在尝试仅使用 CSS3 实现视差滚动。我正在关注这个 guide .但它不起作用。

在没有 Javascript 的情况下进行这种透视投影应该会产生更加流畅和高效的效果。

这是 code我写的。

下面是我的 CSS 和 HTML。

.page {
  height: 100vh;
  width: 100%;
  background-color: #aaa;
  perspective: 1px;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: center;
}
.parallax {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
.page h1 {
  color: #fff;
  transform: translateZ(0px);
}
.page p {
  color: #fff;
  transform: translateZ(-1px);
}

<section class="page">
  <h1 class="parallax">Katalyst</h1>
  <p class="parallax">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quos laborum voluptates ab, temporibus accusantium nobis odio eos. Porro sed officiis aut enim placeat inventore vitae, veniam dignissimos ut minus. Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore
    nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod
    laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur,
    ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum
    totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique
    laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quos laborum voluptates ab, temporibus accusantium nobis odio eos. Porro sed officiis aut enim placeat inventore vitae, veniam dignissimos ut minus. Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore
    nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod
    laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur,
    ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum
    totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quos laborum voluptates ab, temporibus accusantium nobis odio eos. Porro sed officiis aut enim placeat inventore vitae, veniam dignissimos
    ut minus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt
    neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam
    quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque
    recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quos laborum voluptates ab, temporibus accusantium nobis odio eos. Porro sed officiis aut enim placeat inventore
    vitae, veniam dignissimos ut minus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore
    vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit
    amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt
    neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero!
  </p>
</section>
<section class="page">
  <h1 class="parallax">Katalyst</h1>
  <p class="parallax">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quos laborum voluptates ab, temporibus accusantium nobis odio eos. Porro sed officiis aut enim placeat inventore vitae, veniam dignissimos ut minus. Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore
    nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod
    laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur,
    ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum
    totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique
    laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quos laborum voluptates ab, temporibus accusantium nobis odio eos. Porro sed officiis aut enim placeat inventore vitae, veniam dignissimos ut minus. Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore
    nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod
    laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur,
    ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum
    totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quos laborum voluptates ab, temporibus accusantium nobis odio eos. Porro sed officiis aut enim placeat inventore vitae, veniam dignissimos
    ut minus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt
    neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam
    quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque
    recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quos laborum voluptates ab, temporibus accusantium nobis odio eos. Porro sed officiis aut enim placeat inventore
    vitae, veniam dignissimos ut minus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore
    vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit
    amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt
    neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero!
  </p>
</section>

Answer 1

有趣的是，我发现当我按照指南中的示例进行操作时，它可以正常工作。后续在代码下方。这是我的代码:

.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer--base {
  transform: translateZ(0);
  padding-left: 15px;
  width: 400px;
}
.parallax__layer--back {
  transform: translateZ(-2px) scale(3);
}
.parallax__layer--base p {
  color: white;
  font-family: "Arial", Helvetica, sans-serif;
}
.parallax__layer--base h1 {
  color: white;
  font-family: "Arial", Helvetica, sans-serif;
}
.parallax__layer--base h2 {
  color: white;
  font-family: "Arial", Helvetica, sans-serif;
}

<div class="parallax">
  <div class="parallax__layer parallax__layer--back">
    <img
      style="height: 1500px"
      src="https://upload.wikimedia.org/wikipedia/commons/7/73/Pale_Blue_Dot.png" />
  </div>
  <div class="parallax__layer parallax__layer--base">
    <h1>Pale Blue Dot (exerpt)</h1>
    <h2>by Carl Sagan</h2>
    <p>Look again at that dot.</p>
    <p>That's here.</p>
    <p>That's home.</p>
    <p>That's us.</p>
    <p>
      On it everyone you love, everyone you know, everyone you ever heard of, every human being who ever was, lived out their lives.
    </p>
    <p>
      The aggregate of our joy and suffering, thousands of confident religions, ideologies, and economic doctrines, every hunter and forager, every hero and coward, every creator and destroyer of civilization, every king and peasant, every young couple
      in love, every mother and father, hopeful child, inventor and explorer, every teacher of morals, every corrupt politician, every "superstar," every "supreme leader," every saint and sinner in the history of our species lived there-on a mote of dust
      suspended in a sunbeam.
    </p>
    <p>
      The Earth is a very small stage in a vast cosmic arena.
    </p>
    <p>
      Think of the endless cruelties visited by the inhabitants of one corner of this pixel on the scarcely distinguishable inhabitants of some other corner, how frequent their misunderstandings, how eager they are to kill one another, how fervent their hatreds.
    </p>
    <p>
      Think of the rivers of blood spilled by all those generals and emperors so that, in glory and triumph, they could become the momentary masters of a fraction of a dot.
    </p>
    <p>
      Our posturings, our imagined self-importance, the delusion that we have some privileged position in the Universe, are challenged by this point of pale light.
    </p>
    <p>
      Our planet is a lonely speck in the great enveloping cosmic dark.
    </p>
    <p>
      In our obscurity, in all this vastness, there is no hint that help will come from elsewhere to save us from ourselves.
    </p>
    <p>
      The Earth is the only world known so far to harbor life.
    </p>
    <p>
      There is nowhere else, at least in the near future, to which our species could migrate.
    </p>
    <p>
      Visit, yes.
    </p>
    <p>
      Settle, not yet.
    </p>
    <p>
      Like it or not, for the moment the Earth is where we make our stand.
    </p>
    <p>
      It has been said that astronomy is a humbling and character-building experience. 
    </p>
    <p>
      There is perhaps no better demonstration of the folly of human conceits than this distant image of our tiny world.
    </p>
    <p>
      To me, it underscores our responsibility to deal more kindly with one another, and to preserve and cherish the pale blue dot, the only home we've ever known.
    </p>
  </div>
</div>

你的不工作的原因是你基本上没有遵循他给出的布局。这是您需要的布局:

<div class="parallax">
  <div class="parallax__layer parallax__layer--back">
    ...
  </div>
  <div class="parallax__layer parallax__layer--base">
    ...
  </div>
</div>

请注意，有两个 ... 区域。第一个是你想要在后台出现的东西。第二个是您希望放在前台的内容。

只需使用他的 CSS，并为您的 html 保留此结构，它就会起作用。