Javascript 垂直滚动div中的多个背景图像和文本

我将如何以最不迟钝的方式创建这种垂直卷轴？我想我的计划全错了

我目前有一个

div

和一个

背景图像

，还有一个（1）/（2）/etc，它的位置是负的，并且比粘贴在顶部的

div

的z-index更高

我的想法是为每个段落创建一个JS侦听器，并在触发时更改背景图像。但这并不能帮助我让它像那样向上滚动，所以我认为我走错了方向

---

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

所以我认为可以这样做：

你基本上想要创建一个窗口，你可以在其中看到背景图像

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

下面是一个非常基本的片段：

代码：

---

所以我认为可以这样做：

你基本上想要创建一个窗口，你可以在其中看到背景图像

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

下面是一个非常基本的片段：

代码：

---

嘿，谢谢你把这个写出来！这确实很有趣，看起来很棒。我希望有一种方法可以将这些图像作为div的背景图像，因为我有数字徽章（1）/（2）等以负间距粘贴在顶部。嗨：）不用担心。对不起，我帮不上忙！如果您想使用背景图像，那么在我的示例中，这些背景图像应该很容易替换掉？我想我可能误解了徽章的意思，因为我不太清楚你的意思：）哦，在GIF中有两个黑色圆圈，带有“1”+“2”：）我把它们作为负数positioning@Malah我不太清楚如何让他们做你想做的事。也许如果你制作一个不同的gif来显示它是如何从1交换到2的…我想我可能还是误解了，不过哈哈哈，谢谢你写出来！这确实很有趣，看起来很棒。我希望有一种方法可以将这些图像作为div的背景图像，因为我有数字徽章（1）/（2）等以负间距粘贴在顶部。嗨：）不用担心。对不起，我帮不上忙！如果您想使用背景图像，那么在我的示例中，这些背景图像应该很容易替换掉？我想我可能误解了徽章的意思，因为我不太清楚你的意思：）哦，在GIF中有两个黑色圆圈，带有“1”+“2”：）我把它们作为负数positioning@Malah我不太清楚如何让他们做你想做的事。也许如果你制作一个不同的gif来显示它是如何从1交换到2的…我想我可能还是误解了，虽然哈哈

<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>

.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;
}