Becky Becky - 7 months ago 15
Javascript Question

How to get an image to gain an opacity as the page is scrolled down

I came across a cool feature I saw on a site. When you scroll down the main image on the page gains a dark opacity. I know how to add opacity, but specifically how do I add the opacity with the scroll?

http://designgroup.us.com/?utm_source=skycatchfire

Answer
<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;
}

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

.height {
  height:500px;
}

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

https://jsfiddle.net/v5chxhwn/2/