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;