Question

I’m looking for some guidance on how I can recreate this feature. As you can see if you scroll down the opacity changes and the title fades away as the div below comes up. Any ideas or tutorials which can help me? http://davegamache.com/

Till now I have tried only the $(window).scroll(function(){…}); where I can scroll down to a certain trigger and pop up a small div for example. I guess I have to play also with the opacity now. Any help please?

Answer 1

You have the right idea using $(window).scroll(function(){…});

You’ll want to figure out the Y-Coordinate at which you want the div to be invisible and calculate the opacity of the div from that. Most of the time, I’d imagine this Maximum Y-coordinate should be the same as the height of the effected div. Lets say our div is 500px in height. If the div should be at 0-opacity at Y-coordinate 500, then at y-coordinate 100 the opacity should be 20% (or .2)

Working Sample: http://jsfiddle.net/FzNrG/5/

$(window).scroll(function(){
    var opacity = 1- ( $(window).scrollTop() / $('#theDiv').height());
    if (opacity>1) opacity=1;
    if (opacity<0) opacity=0;

    //$('#debug').html('ScrollTop:' + $(window).scrollTop() + '<br>Opacity: ' + opacity);
    $('#theDiv').stop().fadeTo(250, opacity);    
});