jquery - 根据视口(viewport)稍微向上或向下移动一个 div

Question

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

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

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

但是视差效果使背景图像移动，而我需要有一个完全环绕的 div 才能稍微移动。

所以基本上就像 3 个包含大量内容和样式的包装元素，当视口(viewport)从 wrapper1 变为 wrapper2 时，我需要 wrapper1 向下移动一点，wrapper2 向上移动一点。如果我向上滚动，则会发生相反的情况。

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

*并尝试 not to use id's ，改用类