davegamache

I am trying to do a simple parallax effect with jQuery and CSS.

I have 2 long divs, one is 2000px and the other is 1000px each one of those divs have a child div with text inside.

I would like to have these child divs to be centered in the middle of the visible window (not the div which is 2000px high, just the visible window) and to stay centered and in the middle while I scroll down, then fade out at a certain point before reaching the next div.

At the moment, I managed to create the html layout and the css, and made the divs to fade out on click using jQuery.

But I am unable to center them in the middle of the window and keep them fixed while I scroll down and fade them out before reaching the next div.

Maybe I can use Waypoint.js to trigger events at certain points in the scroll but how do I keep the div centered and visible to achieve the parallax effect?

DEMO https://jsfiddle.net/fmub10pv/4/

EDIT Are there any plugins (with demo) that can achieve what I want?

EDIT 2 The desired effect is something like this http://davegamache.com/parallax/

HTML