Cómo hacer FadeIn al hacer scroll con jQuery

26 marzo 2014

Muchas páginas tienen la tendencia actual (especialmente las del diseño Smoth Scrolling), de que aparezcan, según se hace scroll, los concenidos mediante un efecto de fadeIn o aparición.

Esto es posible conseguirlo con una sencilla función y jquery.

El siguiente código se aplica sobre la clase «hideme»:

$(document).ready(function() {
 
    /* Every time the window is scrolled ... */
    $(window).scroll( function(){
 
        /* Check the location of each desired element */
        $('.hideme').each( function(i){
 
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
 
            /* If the object is completely visible in the window, fade it it */
            if( bottom_of_window > bottom_of_object ){
 
                $(this).animate({'opacity':'1'},500);
 
            }
 
        }); 
 
    });
 
});

Para que esto funcione, por defecto, la clase .hideme tiene que tener en su css:
opacity: 0;

Fuente:
http://jsfiddle.net – FadeIn on Scroll + DEMOS