Cómo hacer FadeIn al hacer scroll con jQuery

ipad air

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

Autor: Janmi

Janmi es un informático entusiasta de la ciencia ficción, el diseño gráfico, el universo de Tolkien, fantasía épica y otras cosas frikis. Apasionado por la tecnología, ya sea desde el punto de visto técnico, domótico, funcional o de diseño.