Twitter Bootstrap Question posted in

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

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: http://i.imgur.com/dBtLqpq.png , but something like this one is: http://imgur.com/a/elZv5
I tried to go with: 

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

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

Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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/

    Login or Signup to reply.
  3. 0

    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);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search