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>

在代码中看到，我基本上有2DIV"layer"。一个（前层）是相对定位的，另一个（后层）是绝对定位的（在前层后面的背景中）。后层高度为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

2 个 DIV 视差滚动

2 DIVs Parallax Scrolling

jquery

css

parallax

stellar.js