CODEWITHSUNDEEP
javascriptjqueryviewportjquery-waypoints
Barney
Barney

Reputation: 1848

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

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).

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

enter image description here

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%'
});
});

Upvotes: 4

Views: 1897

Answers (1)

Bill Criswell
Bill Criswell

Reputation: 32921

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

Upvotes: 1

Related Questions