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 - ＆gt; 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视差滚动

1 个答案: