Question

我正在尝试使这种视差效果的文本不会与效果相同地向下滚动。

我认为这与html CSS代码（溢出）有关，我尝试将其放到不同的地方，但是没有用。有什么办法可以使我的视差恢复原状？向下滚动时，文字仍将完全可见？原因是，只要您向下滚动视差并且文本也会滚动，但是到您到达文本时，已经有些滚动了。

html {
  height: 100%;
  overflow: hidden;
}

body {
  color: #fff;
  margin: 0;
  padding: 0;
  perspective: 1px;
  transform-style: preserve-3d;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  font-family: "Luna"
}

header {
  box-sizing: border-box;
  min-height: 100vh;
  padding: 30vw 0 5vw;
  position: relative;
  transform-style: inherit;
  width: 100vw;
}

header h1 {
  margin-top: -100px;
}

header,
header:before {
  background: 50% 50% / cover;
}

header:before {
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  background-image: url('../img/lake.jpg');
  background-size: cover;
  transform-origin: center center 0;
  transform: translateZ(-1px) scale(2);
  z-index: -1;
  min-height: 100vh;
}

header * {
  font-weight: normal;
  letter-spacing: 0.2em;
  text-align: center;
  margin: 0;
  padding: 1em 0;
}

p {
  color: grey;
}

.container {
  max-width: 95%;
  margin: 0 auto;
  display: block;
}

<header>
  <h1>Parallax Effect</h1>
  <p>Pure CSS // No JavaScript!</p>
</header>

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dictum interdum lectus vel commodo. Etiam massa augue, fermentum vel elit ut, lobortis pellentesque quam. Nulla pellentesque, velit in accumsan hendrerit, magna mauris congue odio, at
    maximus quam est in nisl. Mauris placerat eros dapibus commodo congue. Cras a sollicitudin nulla, at varius lorem. Quisque malesuada rhoncus orci, et convallis metus semper in. Donec vulputate sit amet lectus vitae consequat. Etiam convallis odio
    eget diam pretium, et molestie tortor imperdiet. Duis sapien felis, auctor sed mattis a, pretium non nisi. Proin dui metus, tempor ut viverra ac, laoreet ut erat. Sed sollicitudin lorem aliquam, tincidunt mi quis, imperdiet risus.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dictum interdum lectus vel commodo. Etiam massa augue, fermentum vel elit ut, lobortis pellentesque quam. Nulla pellentesque, velit in accumsan hendrerit, magna mauris congue odio, at
    maximus quam est in nisl. Mauris placerat eros dapibus commodo congue. Cras a sollicitudin nulla, at varius lorem. Quisque malesuada rhoncus orci, et convallis metus semper in. Donec vulputate sit amet lectus vitae consequat. Etiam convallis odio
    eget diam pretium, et molestie tortor imperdiet. Duis sapien felis, auctor sed mattis a, pretium non nisi. Proin dui metus, tempor ut viverra ac, laoreet ut erat. Sed sollicitudin lorem aliquam, tincidunt mi quis, imperdiet risus.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dictum interdum lectus vel commodo. Etiam massa augue, fermentum vel elit ut, lobortis pellentesque quam. Nulla pellentesque, velit in accumsan hendrerit, magna mauris congue odio, at
    maximus quam est in nisl. Mauris placerat eros dapibus commodo congue. Cras a sollicitudin nulla, at varius lorem. Quisque malesuada rhoncus orci, et convallis metus semper in. Donec vulputate sit amet lectus vitae consequat. Etiam convallis odio
    eget diam pretium, et molestie tortor imperdiet. Duis sapien felis, auctor sed mattis a, pretium non nisi. Proin dui metus, tempor ut viverra ac, laoreet ut erat. Sed sollicitudin lorem aliquam, tincidunt mi quis, imperdiet risus.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dictum interdum lectus vel commodo. Etiam massa augue, fermentum vel elit ut, lobortis pellentesque quam. Nulla pellentesque, velit in accumsan hendrerit, magna mauris congue odio, at
    maximus quam est in nisl. Mauris placerat eros dapibus commodo congue. Cras a sollicitudin nulla, at varius lorem. Quisque malesuada rhoncus orci, et convallis metus semper in. Donec vulputate sit amet lectus vitae consequat. Etiam convallis odio
    eget diam pretium, et molestie tortor imperdiet. Duis sapien felis, auctor sed mattis a, pretium non nisi. Proin dui metus, tempor ut viverra ac, laoreet ut erat. Sed sollicitudin lorem aliquam, tincidunt mi quis, imperdiet risus.</p>

</div>

Answer 1

您的container类需要相对于其父类放置，以使其显示在视差背景的前面。

.container {
  max-width: 95%;
  margin: 0 auto;
  display: block;
  position: relative;
}

您还需要添加一些背景色以在视觉上将其分开。

这是一个效果类似的Codepen demo及其accompanying article。

纯CSS视差-滚动后隐藏在视差图片下的文本

1 个答案: