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
Comments
Post a Comment