javascript - 在 div 中垂直滚动多个背景图像以及文本

Question

我将如何以最不迟钝的方式创建这种垂直滚动？我想我把这一切都计划错了。

我目前有一个带有 background-image 的 div，以及带有负定位和更高 z-index 的 (1)/(2)/etc 比那个div，贴在上面。

我的想法是为每个段落创建一个 JS 监听器，并在触发时更改背景图像。但这不会帮助我让它像那样向上滚动，所以我想我正在以错误的方式去做。

理想情况下，我希望图像以与段落相同的方式滚动，以使其看起来“自然”。但是用 mask 将多个 div 相互嵌套并打开显示:关闭似乎有点太疯狂了。

Answer 1

所以我认为可以这样做:

您本质上想要创建您在...中看到背景图像的窗口

因此，创建一个 z-index 为 10 的固定元素，然后将图像的 z-index 设置为 1，这样它们就在窗口后面。然后将文本的 z-index 设置为 20，使其位于所有内容之上。

这是一个非常基本的片段:

https://codepen.io/anon/pen/LzQrYa

代码:

<div class="container">

  <div class="cover top"></div>
  <div class="cover right"></div>
  <div class="cover bottom"></div>
  <div class="cover left"></div>
  <div class="bg-image one"></div>
  <div class="bg-image two"></div>
  <div class="bg-image three"></div>

  <p class="text one">Text 1</p>
  <p class="text two">Text 1</p>
  <p class="text three">Text 1</p>
</div>

CSS:

.container {
  position: relative;
  display: inline-block;
  width: 100%;
  float: left;
}
.container .cover {
  position: fixed;
  display: inline-block;
  background-color: #ffffff;
  z-index: 10;
}
.container .cover.top { 
  top: 0; left: 0; 
  width: 100%; 
  height: 120px;
}
.container .cover.right { 
  top: 0; right: 0; 
  width: 100px; 
  height: 100%;
}
.container .cover.bottom { 
  bottom: 0; left: 0; 
  width: 100%; 
  height: 120px;
}
.container .cover.left { 
  top: 0; left: 0; 
  width: 500px; 
  height: 100%;
}
.container .bg-image {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 400px;
  float: left;
}
.container .bg-image.one { background-color: #cccccc; }
.container .bg-image.two { background-color: #8ec640; }
.container .bg-image.three { background-color: #ff00ff; }

.container .text {
  position: absolute;
  display: inline-block;
  font-size: 40px;
  color: #000000;
  z-index: 20;
}
.container .text.one {
  top: 40px;
  left: 50px;
}
.container .text.two {
  top: 500px;
  left: 50px;
}
.container .text.three {
  top: 940px;
  left: 50px;
}