Show Div when scroll position

Question

First of all i would like to refer to this website: http://annasafroncik.it/ I love the way the animations come into view. Is it hard to create a similar function in jquery? Are there any plugins to create such an effect?

Hope someone will help me out.

Answer 1

Basically, you want to add a "hideme" class to every element you want hidden (then you set that class to "opacity:0";

Then, using jQuery you set a $(window).scroll() event to check the location of the bottom of every "hideme" element against the bottom edge of your visible window.

Here's the meat of it ...

/* 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).offset().top + $(this).outerHeight();         var bottom_of_window = $(window).scrollTop() + $(window).height();          /* If the object is completely visible in the window, fade it in */         if( bottom_of_window > bottom_of_object ){              $(this).animate({'opacity':'1'},500);          }      });   }); 

Here's a full jsfiddle: http://jsfiddle.net/tcloninger/e5qaD/