FadeIn on Scroll (jQuery)

Used to answer a question on StackOverflow.

by mrjordy

HTML

<div id="container">
    
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div class="hidemeLeft">Fade In</div>
    <div class="hideme">Fade In</div>
    <div class="hidemeLeft">Fade In</div>
    <div class="hideme">Fade In</div>
    <div class="hidemeLeft">Fade In</div>
    
</div>

CSS

#container
{
    height:2000px;    
}

#container DIV
{ 

    padding:50px; 
    background-color:lightgreen; 
}

.hidemeLeft
{
 opacity: 0;
    margin-left: -500px;
}
.hidemeRight
{
 opacity: 0;
    transform: translate(20px 0px);
}

JavaScript

$(document).ready(function() {
    
    /* Every time the window is scrolled ... */
    $(window).scroll( function(){
    
        /* Check the location of each desired element */
        $('.hidemeLeft').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'},500);
                $(this).animate({'translate':'0'},200);
                    
            }
            
        }); 
        
    
    });
    
});