javascript - Is there a way of making my div background less and less transparent while user keeps scrolling the webpage? -


i have bootstrap webpage uses video background. more, i'm using following css code:

.transparent{     box-shadow: 0 0 0 1000px rgba(0, 999, 0, 1);     overflow:hidden;  }  #imgbox{     box-shadow: 0 0 0 1000px rgba(0, 999, 0, 1);  } 

to make "hole" in covering layer, when user see's layer - see part of video underneath. it's hard explain, take @ example: http://jsfiddle.net/leytgm3l/31/

i want achieve effect, green layer transparent @ beginning (let's has rgba(0, 999, 0, 1), when user keeps scrolling down , layer becomes more , more visible, gets less transparent (so when it's visible should have rgba(0,999,0,1) example. how can achieve jquery or css?

i not sure requirement checkout updated jsfiddle of your's

just added $("#black").css("opacity",$("body").scrolltop()/1000); in $(window).scroll such increase opacity on window scroll , using small amount since value of opacity can withing range of 0 1

http://jsfiddle.net/leytgm3l/36/


Comments

Popular posts from this blog

qt - Using float or double for own QML classes -

Create Outlook appointment via C# .Net -

ios - Swift Array Resetting Itself -