Below is the JavaScript responsible for triggering the animation:
/* This function runs every time the user scrolls */
$(window).scroll( function(){
/* Check the position of each element with the 'fade-in' class */
$('.fade-in').each( function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If at least half of the object is visible, fade it in */
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},600);
}
});
});