I'm searching for a way to scroll 2 div container of different height, placed on top of each other, with a parallax effect.
I found that probably stellar.js will do the trick for me but I can't get it to work in that case.
Code:
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>As seen in the code, I have basically 2 DIV "layer". One (front layer) is positioned relative and the other one (back layer) is positioned absolute (in the background behind the front layer). The back layer is 2000px height while the front layer is 4000px height.
I now want that when I scroll the website from top to bottom that the back layer scrolls at the half speed as the front layer so that both gets fully scrolled with the same scroll movement.
Somehow I'm sure that this fix is probably pretty easy, but have no clue why I can't get it to work at all. Maybe someone can help.
I've also setup a jsfiddle here --> https://jsfiddle.net/8ne7wq0g/
Many thanks in advance.
I have done it with pictures for you, to display the effect clearly, you don't need a plugin for parallax, it is very simple with Jquery.
<main>
<div class="bg"></div>
<div class="bg2">
</div>
</main>