I want to change opacity from 0 to 1 of the element when it's scrolled up to the top of the page

Question

I'm using twitter-bootstrap on my page and I have a video background. It looks like this https://jsfiddle.net/Leytgm3L/41/ . When user scrolls down, the black section starts to appear and first its opacity is set to 0, but when user continue scrolling - it changes to 1 when he reach end of this section. I want to change that, so the section will have the opacity set to 1 when it fully appears on the screen, so the user will see the black background of this component when it's fully visible on the page. So this is not good: https://i.stack.imgur.com/uOEKo.png , but something like this one is: https://i.stack.imgur.com/4qqMb.jpg I tried to go with:

$("#black").css("opacity",$("body").scrollTop()/1000);

but it didn't work. Can you help me with that?

@CarlEdwards yes I do, I put it in `$(window).scroll(function(){`, and it partially works - the div gets darker when user scrolls and is completely black when user reaches end of it, and I want to make it black when it is on top of the page — randomuser1, Jul 30 '15 at 20:24
@JohnBupit it didn't work http://jsfiddle.net/Leytgm3L/43/ , it's black at the very beginning of scrolling, but when it goes lower its opacity is going closer to 0.... :) — randomuser1, Jul 30 '15 at 20:32

score 1 · Answer 1 · answered Jul 30 '15 at 20:31

1

How about checking the scrollTop against the height of the video container? Something like this:

$(window).scroll(function(){
    $(".move").toggle($(this).scrollTop() === 0);
    var videoHeight = $('.video-container2 video').height();
    var scrollTop = $('body').scrollTop();
    var opacity = scrollTop >= videoHeight ? 1 : 0;
    $("#black").css("opacity",opacity);
});

Hope this helps

answered Jul 30 '15 at 20:31

Jrd

668
6
9

so that's how it looks now http://jsfiddle.net/Leytgm3L/44/ , it partially works, but is there a way of making it seamless and with smooth transition, instead of changing it just from 0 to 1? – randomuser1 Jul 30 '15 at 20:34
how about adding a css opacity transition on #black? something like #black { transition: opacity .7s } – Jrd Jul 30 '15 at 20:36
yeah, that's a dirty hack :) It won't solve the issue unfortunately - I just want to make it so that when the div is visible at 1/4 of the screen it's opacity is set to 0.25, and when it's fully visible then the opacity is 1 – randomuser1 Jul 30 '15 at 20:39
ah, I see; guess I misunderstood the question...I think TomSlick's answer will be what you want then. – Jrd Jul 30 '15 at 20:40

Maximillian Laumeister · Accepted Answer · 2015-07-30T20:43:15.277

1

Here is some code that changes the opacity as the user scrolls down, starting from opacity 0 at the top of the document, and becoming opacity 1 when they reach the element:

$("#black").css("opacity",1 -($("#black").offset().top - $("body").scrollTop()) / $("#black").offset().top);

It works by comparing the black element's position on the page against the current scroll value. For additional performance, you could cache the jQuery selectors and the call to .offset.

JSFiddle: http://jsfiddle.net/Leytgm3L/45/

edited Jul 30 '15 at 20:43

answered Jul 30 '15 at 20:36

Maximillian Laumeister

19,884
8
59
78

Yes, that worked, that's exactly what I wanted, it works pretty smooth :) Thank you very much! – randomuser1 Jul 30 '15 at 20:43
btw, one more question - because I don't exactly understand what do you mean by caching the jquery selectors... could you explain me that? or give me some example maybe? Thanks! – randomuser1 Jul 30 '15 at 20:59
1

@randomuser1 [An article](http://ttmm.io/tech/selector-caching-jquery/) and [a StackOverflow post](https://stackoverflow.com/questions/23743326/why-cache-jquery-objects) on selector caching – Maximillian Laumeister Jul 30 '15 at 21:00

score 0 · Answer 3 · answered Jul 30 '15 at 20:38

You can divide the scrollTop of body by the height of the video to get the transition you're looking for

var videoHeight = $('.video-container2 video').height();
var scrollTop = $('body').scrollTop();
var opacity = scrollTop / videoHeight;
$("#black").css("opacity", opacity);

I want to change opacity from 0 to 1 of the element when it's scrolled up to the top of the page

3 Answers3