fade scroll

by lovromar

HTML

<div class="biglogo2">
        <img src="http://i.i.cbsi.com/cnwk.1d/i/tim/2011/03/16/Chrome-logo-2011-03-16.jpg" />
    </div>

CSS

.biglogo2 {
position: fixed; /* want to see this */
width:80%;
display:block;
margin-left:auto;
margin-right:auto;
margin-top:130px;
margin-bottom:130px;
opacity:1;
}

/* just making the page scrollable*/
body, html{
height:200%;
}

JavaScript

$(function(){
    var fadeBegin = 500, 
    fadeFinish = 800, 
    fadingElement = $('.biglogo2');

$(window).on('scroll', function(){
    var offset = $(document).scrollTop(), opacity = 0; 
    console.log(offset);
    if( offset <= fadeBegin ){
        opacity = 1; 
    } else if( offset <= fadeFinish ){
        opacity = 1 - offset / fadeFinish;

    }
    fadingElement.stop().animate({opacity: opacity}, 200);
});
    
    });