Question

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

我想现在让每个区域在滚动时略微向上或向下移动，因此它给人一种维度的幻觉。

但我无法绕过它如何做到这一点。我搜索了半天，但我能找到的最接近的是视差效果。这非常接近，但我希望整个div移动，而不仅仅是背景图像。

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

所以基本上就像3个包含大量内容和样式的包装元素一样，当视口从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，而不是使用类

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

1 个答案: