Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Javascript Image Fade In / Fade Out
(function($){
'use strict';
function scrolled(){
var scrollTop = $(window).scrollTop(),
windowBottom = scrollTop + $(window).height(),
images_in_view = $('img:in-viewport');
//for each image in view, fade out on bottom
images_in_view.each(function(i){
var
self = $(this),
offset = self.offset().top,
img_height = self.height(),
distance = offset - windowBottom,
visibility = Math.abs(distance) / img_height;
if(visibility > 0.9)
visibility = 1;
if(visibility > 0 && visibility <= 1 )
self.css('opacity', visibility);
});
}
$(window).bind("scroll resize", scrolled);
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.