让图像缩小并替换为另一个图像，然后滚动浏览

Question

html, body{
  margin: 0;
  height: 100%;
}
.sky,.water,.underwater{
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.sky{
  background-image: url(https://i.stack.imgur.com/18r3B.jpg);
  height: 100%;
}
.water{
  background-image: url(https://i.stack.imgur.com/BfgRt.jpg);
  height: 100%;
}
.underwater{
background-image: url(https://i.stack.imgur.com/5LCuq.jpg);
height: 100%;
}

  <div class="sky"></div>
  <div class="water"></div>
  <div class="underwater"></div>

我希望此图像是您打开网站时看到的第一件事(全屏(。我把天空和水作为单独的图像。如果你向下滚动，我希望"水"图像的高度缩小，这样你的视图看起来会下降，而它被位于它下面的水下(尚不可见(所取代。当"水下"图像到达水图像的顶部/天空图像的底部时，我希望天空图像与"水下"图像一起向上滚动。

我很难解释这个哈哈，但我希望你能理解。感谢您的帮助！

Answer 1

您可以向我们展示一些您已经尝试过的工作，这将有助于使您的问题更清晰。

无论如何，这样的事情是一个好的开始吗？

.top-contain {
  min-height: 100vh;
  background: teal;
}
.sky {
  background: url('https://i.stack.imgur.com/18r3B.jpg') center fixed;
  background-size: cover;
  height: 50vh;
}
.water {
  background: url('https://i.stack.imgur.com/BfgRt.jpg') center;
  background-size: cover;
  height: 50vh;
}
.underwater {
  background: url('https://cdn.pixabay.com/photo/2013/02/20/10/32/wallpaper-83671_960_720.jpg');
  background-size: cover;
  height: 100vh
}

<div class="top-contain">
  <div class="sky"></div>
  <div class="water"></div>
</div>
<div class="underwater"></div>