Becky Becky - 2 years ago 93
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?

Answer Source
<div id="home-main-img">
    <img src="" alt="Demolition and Wrecking" id="demolition1">

<div class="height">

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

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

.height {

var scrollPosition = $(this).scrollTop();
var docHeight = $(document).height();
var diff = docHeight - scrollPosition;

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download