انیمیشن همراه با اسکرول

شما در واقع میتونید با جیکوئری به راحتی این کار رو انجام بدید 

  $(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'},500);
                    
            }
            
        }); 
    
    });
    
});

و یک استایل CSS ساده برای انمیشن !

 #container
{
    height:2000px;    
}

#container DIV
{ 
    margin:50px; 
    padding:50px; 
    background-color:lightgreen; 
}

.hideme
{
    opacity:0;
}

و هر جا خواستید استفاده کنید با دادن یک کلاس به نام hideme میتونید به راحتی یک باکس انمیشینی بسازید .                    دمو : http://jsfiddle.net/tcloninger/e5qaD/