Gordy Colonna Gordy Colonna - 3 months ago 14
CSS Question

How to fade in from bottom to top

I want some text to fade in from bottom to top on scroll.
Right now i have this code:

$(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).offset().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'},1000);

}

});

});


});

Right now it just fades in, but i want it to fade in from bottom to top.
Any idea's ?

Answer

Add this line of code to your animation options:

JavaScript:

if( bottom_of_window > bottom_of_object ){
    $(this).animate({'opacity':'1', 'margin-top':'50px'}, 500);
}

And your CSS to:

#container .hideme { 
    opacity:0;
    margin-top: 200px;
}

By doing this, you're not only animating the opacity of the element, but also it's margin-top property, effectively fading it out when moving 50px to the bottom.