Using HTML/CSS/JavaScript to control image opacity
Question
could someone please tell help me with this code?
Basically I have 2 identical images one is shot in daylight where the other one is shot at night, I want it where the light one is the original image and as the page is scrolled down its starts to blend into the darker one.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>BG Test</title>
<script>
var start = 100 // how far the user has to scroll down before it start fading
var end = 1200 // the number of pixels the user has to scroll down before the opacity is 0.
$(document).scroll(function(){
if(scrollTop>start){
$('images/MainLight.png').css({'body':(end-scrollTop)/(end-start)});
}
});
</script>
</head>
<style type="text/css">
body{
background:url(images/MainLight.png) no-repeat center center fixed;
opacity:100;
width:100%;
z-index:-1;
}
bgimg{
background:url(images/MainDark.png) no-repeat center center fixed;
opacity:100;
width:100%;
z-index:0;
}
</style>
<div class="body" >
Top!
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br />
Middle!
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Bottom!
</div>
<body>
</body>
</html>
Many Thanks in advance.
3 answers
solution1
1 2014-03-09 19:25:44
Try something as in fiddle: http://jsfiddle.net/z7E9u/1/
I am copying the fiddle js:
var fadeStart=100 // 100px scroll or less will equiv to 1 opacity ,fadeUntil=200 // 200px scroll or more will equiv to 0 opacity ,fading = $('#fading') ;
$(window).bind('scroll', function(){
var offset = $(document).scrollTop()
,opacity=0
;
if( offset<=fadeStart ){
opacity=1;
}else if( offset<=fadeUntil ){
opacity=1-offset/fadeUntil;
}
fading.css('opacity',opacity).html(opacity);
});
Hope it helps!
solution2
0
The issues is that opacity goes from 1 to 0. Just change your css to the following:
body{
background:url(images/MainLight.png) no-repeat center center fixed;
opacity:1;
width:100%;
z-index:-1;
}
bgimg{
background:url(images/MainDark.png) no-repeat center center fixed;
opacity:1;
width:100%;
z-index:0;
}
solution3
0 2014-03-09 20:58:47
Okay I used -webkit-mask for this. Try this FIddle
.child-2 {
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.45, #000), color-stop(0.55, transparent));
-webkit-mask-size:220%;
-webkit-mask-position-y:0%;
}
var child2 = $('.child-2'),
lastScrollTop = 0;
$(window).scroll(function (event) {
var st = $(this).scrollTop(),
pos = parseInt(child2.css("-webkit-mask-position-y").replace('%', ''));
if (st > lastScrollTop) {
pos += 3;
} else {
pos -= 3;
}
lastScrollTop = st;
if (!(pos<0) || !(pos>100)) {
child2.css("-webkit-mask-position-y", pos + "%");
}
});//Rest of the code is in the fiddle.
It is still buggy but it's only a rough idea.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.