1

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.

Joe Hana
  • 13
  • 3

1 Answers1

0

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>

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

damiano celent
  • 721
  • 6
  • 12
  • thanks a lot for your help. That indeed did the trick altough I needed to adjust it a little bit for my case. But it gave me the right direction. Thanks :) – Joe Hana Oct 28 '15 at 19:06
  • @Joe Hana You are welcome:-) I displayed it deliberately in that way, so you would see exactly where to change parameters, i have yet to see a shorter parallax function:-) It will call the function on scroll non stop, but i have used this for live mobile websites and am still getting high google speed test results. – damiano celent Oct 29 '15 at 21:20