CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jimmy
Jimmy

Reputation: 12487

Change fade out a div based on scroll with jquery

This is my code: http://jsfiddle.net/spadez/Fq5K4/

I want to make it so that as the user scrolls down the page, the image in the top section turns black the more i scroll down so that that whole block is completely black. This technique can be seen here:

http://www.metalabdesign.com/work/

The closest bit of code I could find is like this: http://jsfiddle.net/HsRpT/6/:

$(window).scroll(function() {
    var el = $('.block');    
    var offset = el.offset();  
    var opacity = ( (offset.top - el.height() ) / 100 ) * -1;
    $('.block').css('opacity', opacity );
});

Upvotes: 3

Views: 897

Answers (1)

adeneo
adeneo

Reputation: 318182

You'd do that like this :

$(window).on('scroll', function() {
    $('.block').css('opacity', function() {
        return 1 - ($(window).scrollTop() / $(this).outerHeight());
    });
});

FIDDLE

ANOTHER FIDDLE

Upvotes: 2

Related Questions