How can I remove opacity of one element when user scrolls to it?

Question

I have a webpage like this http://jsfiddle.net/Leytgm3L/47/ and as you can see there's a transparent square in the 2nd section. So far the video on the first page has the texture overlay:

.texture-overlay2 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
}

Is there a way of removing this dark overlay inside the little square on the second section?

score 0 · Answer 1 · answered Jul 31 '15 at 11:01

0

You just need to tweak a little bit you javascript,

$(window).scroll(function() {
    var i = $(window).scrollTop();
    if(i>200){ // you decide here what to do once the scroll of the page is over 200px (or whatever value you need)
        // hide the background here
        $('.texture-overlay2').hide();
    }else{
        $('.texture-overlay2').show();
    }
});

answered Jul 31 '15 at 11:01

Kup

882
14
31

is there a way of doing this transition more smoothly? – randomuser1 Jul 31 '15 at 11:23

score 0 · Answer 2 · answered Jul 31 '15 at 11:05

0

I have tried to add this into your CSS:

#black{
    opacity: 0.5;
}

It's probably not what you wanted, but it might give you further ideas.

answered Jul 31 '15 at 11:05

bigneo

141
10

How can I remove opacity of one element when user scrolls to it?

2 Answers2