Progressively adding opacity while scrolling

Question

I am struggling with figuring out how to modify some existing code I have to replicate a feature I saw on a site. If you go to this site: , when you scroll down you will see the image gains opacity. My fiddle somewhat does this, but I cannot figure out how to apply a darker opacity and have the opacity progressively be added rather than all at once.

I know the level of opacity is being changed via the javascript, I am just not aware how to modify it to get the result I am after.

var scrollPosition = $(this).scrollTop();
            var docHeight = $(document).height();
            var diff = docHeight - scrollPosition;
        console.log(scrollPosition);
        $('#demolition1').css({'opacity':diff/docHeight});

Fiddle

<div id="home-main-img">
<img src="http:optimumwebdesigns.com/images/demolition1.jpg" alt="Demolition and Wrecking" id="demolition1">
</div>

<div class="height">
</div>

#home-main-img img{
    width: 100%;
    height: auto;
    margin: 0;
  display: block;
}

#home-main-img {
  background: #000;
}

.height {
  height:500px;
}

$(document).scroll(function(e){
        var scrollPosition = $(this).scrollTop();
        var docHeight = $(document).height();
        var diff = docHeight - scrollPosition;
    console.log(scrollPosition);
    $('#demolition1').css({'opacity':diff/docHeight});
});

Answer 1

I think your mistake is setting diff against the doc height rather than the height of the item you want to fade out.

Your JS should be something like:

var $item = $('#demolition1');

$(document).scroll(function(e) {

        var $this = $(this),
        scrollPosition = $this.scrollTop(),
        itemHeight = $item.height(),
        diff = itemHeight - scrollPosition;

    console.log(scrollPosition);
    $item.css({'opacity': (diff/itemHeight) });

});

Here's a working JS Fiddle: https://jsfiddle.net/s6ta6bdc/

Answer 2

You can use image height, instead of document, to get the correct percentage of opacity

$(document).scroll(function(e){
        var scrollPosition = $(this).scrollTop();
        var imgHeight = $('#demolition1').height();

        var diff = imgHeight - scrollPosition;
    $('#demolition1').css({'opacity':diff/imgHeight});
});

try fiddle updated