2 DIV 视差滚动

Question

我正在寻找一种方法来滚动 2 个不同高度的 div 容器，它们彼此叠放，具有视差效果。

我发现 stellar.js 可能会为我解决问题，但在这种情况下我无法让它工作。

代码：

jQuery(document).ready(function ($) {
  $.stellar();
});

main {height: 4000px; margin: 100px 0; position: relative;}
        
.layer {margin: auto; opacity: .8; position: absolute; top: 0;}
        
.layer-back {width: 80%; height: 2000px; left: 10%; background: #F96; }
.layer-front {width: 50%; height: 4000px; position: relative; background: #CF9;}

<main>
  <div class="layer layer-back" data-stellar-ratio="0.5">
    <h1>Layer Back</h1>
  </div>
  <div class="layer layer-front" data-stellar-ratio="1">
    <h1>Layer Front</h1>
  </div>
</main>

从代码中可以看出，我基本上有 2 个 DIV“层”。一个（前层）相对定位，另一个（后层）绝对定位（在前层后面的背景中）。后层2000px高，前层4000px高。

我现在希望当我从上到下滚动网站时，后层以前层的一半速度滚动，以便两者都以相同的滚动运动完全滚动。

不知何故，我确信这个修复可能很容易，但不知道为什么我根本无法让它工作。也许有人可以帮忙。

我还在这里设置了一个 jsfiddle --> https://jsfiddle.net/8ne7wq0g/

非常感谢。

Answer 1

我已经给你做了图片，为了清晰的显示效果，你不需要视差插件，用jquery很简单。

<main>
<div class="bg"></div>
<div class="bg2">
</div>
</main>

http://codepen.io/damianocel/pen/yYKyaN