根据视口向上或向下移动div

Question

我有一个单页设计要实现，它看起来像是杂志的几个裁剪页面，垂直放置，彼此稍微重叠。它们在每一页的顶部和底部都有一些磨损和洞，所以你可以在它们重叠的小区域看到哪个页面在顶部，哪个页面在下面。

我现在想让每个区域在滚动时稍微向上或向下移动，这样就会产生一种维度的错觉。

但我不知道该怎么做。我找了半天，但我能找到的最接近的是视差效果。这很接近，但我希望整个div移动，而不仅仅是背景图像。

但是视差效果使背景图像移动，而我需要有一个完整的包装div来稍微移动。

所以基本上就像3个有很多内容和样式的包装元素一样，当视口从包装1移动到包装2时，我需要包装1向下移动一点，包装2向上移动一点。如果我向上滚动，就会出现相反的情况。

<div id="wrapper1">Lots of content and more divs</div>
<div id="wrapper2">Lots of content and more divs</div>
<div id="wrapper3">Lots of content and more divs</div>

任何想法或建议都将非常受欢迎。或者另一种效果，可以让我将这种运动的错觉存档到整个图层中。

Answer 1

只有CSS的一个想法是在容器元素上使用perspective属性，并使用Z平移和缩放来校正绝对定位的包装器子元素上的维度：

<div class="container">
  <div class="wrapper1 parallax">Lots of content and more divs</div>
  <div class="wrapper2 parallax">Lots of content and more divs</div>
  <div class="wrapper3 parallax">Lots of content and more divs</div>
</div>

.container {
  perspective: 1px;
  position: relative;
}
.parallax {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.wrapper1 {
  transform: translateZ(0);
}
.wrapper2 {
  transform: translateZ(-1px) scale(1.5);
}
.wrapper3 {
  transform: translateZ(-2px) scale(2);
}

*尽量不使用id，而是使用类

Answer 2

<div style="height: 1000px;">
   <div style="height: 100px; position: sticky; top: 0;">sticky</div>
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/position