2 DIVs Parallax Scrolling

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 "слой". Один (передний слой) позиционируется относительным, а другой (задний слой) расположен абсолютным (на заднем плане за передним слоем). Задний слой имеет высоту 2000 пикселей, а передний слой - высота 4000 пикселей.

Теперь я хочу, чтобы при прокрутке веб-сайта сверху вниз нижний слой прокручивался с половинной скоростью в качестве переднего слоя, так что оба они полностью прокручиваются с тем же движением прокрутки.

Как-то я уверен, что это исправление, вероятно, довольно легко, но не имеет понятия, почему я не могу заставить его работать вообще. Может, кто-то может помочь.

Я также настроить jsfiddle здесь ->https://jsfiddle.net/8ne7wq0g/

Большое спасибо заранее.

Answer 1

Я сделал это с фотографиями для вас, чтобы четко показать эффект, вам не нужен плагин для параллакса, это очень просто с JQuery.

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

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