Search code examples
javascriptjquerycssscrollparallax

Three divs of different heights reach the bottom at the same time


I'm looking to implement some parallax effects into my site that would allow three different sized (height) divs to scroll at different speeds to reach the bottom of their container all at the same time. I'm looking for the easiest way to accomplish this. I've managed to find a small script that's capable of handling two different divs, but I'm having trouble changing the script to compensate for the third div.

Here's my code. If you need a better visual of what I'm trying to accomplish, check out this site that uses a similar method.

I've got the left and right div's working right now, I just need help getting the middle div to work the same as the other two.

Feel free to edit my code pen. I'm not opposed to using a different script either, this just seemed so simple that I started to run with it. If you have something better, let me know.


Solution

  • Try this : an updated version of your code pen: http://codepen.io/anon/pen/GvCif