Using waypoints plugin to fade elements into and out of viewport on scroll

Question

I've been a little stuck on the following issue for some time. Essentially I have vertically stacked DIVs, all of the same characteristics and CSS class (.vert-container).

• On scroll down, opacity of the top view-able DIV reduced as it leaves the top of the viewport.
• On scroll down, opacity of the bottom view-able DIV increased as it enters the viewport.

This effect of the top DIV fading out and the last fading in to continue for all of these DIVs.

I have been trying to achieve this with a combination of the jQuery waypoints plugin and fading opacity.

Anyone who can help me, it would be greatly appreciated. I will post my very incomplete code so far for the sake of a starting point.

$(document).ready(function(){
$('.vert-container .inner').waypoint({
  handler: function() { 
    $('.vert-container .inner').stop().animate({ "opacity": 0.2 }); // Fade out the DIV that is leaving viewport
  },
  offset: '50%'
});
});

Answer 1

I tried to do it with opacity but I was having trouble with the Javascript. I came up with this, though.

It isn't exactly what you're looking for but I think it's pretty close with much less hassle and no Javascript.

I would use the :before and :after elements on a container to make gradients at the top and bottom of the element so it sort of fakes the opacity.

Here's a quick demo: http://jsbin.com/aVaSIJuB/1/edit?html,css,output