当用户向下滚动页面时,我试图让背景图像淡出/淡出。从长远来看,我正在使用几张背景图像拍摄延时效果。我已经在滚动上改变了背景图像,但我似乎无法让它们从一个到下一个淡出。
这是我目前得到的- jsFiddle
$(document).scroll(function () {
if ($(this).scrollTop() > 1) {
$('body').css({
backgroundImage: 'url("http://s3.amazonaws.com/dfc_attachments/images/3237846/sun1_web.png")'
});
}
if ($(this).scrollTop() > 250) {
$('body').css({
backgroundImage: 'url("http://s3.amazonaws.com/dfc_attachments/images/3237850/sun2_web.png")'
});
}
if ($(this).scrollTop() > 500) {
$('body').css({
backgroundImage: 'url("http://s3.amazonaws.com/dfc_attachments/images/3237854/sun3_web.png")'
});
}
if ($(this).scrollTop() > 750) {
$('body').css({
backgroundImage: 'url("http://s3.amazonaws.com/dfc_attachments/images/3237858/sun4_web.png")'
});
}
});
下面是它的工作原理,为任何有这个问题的人。
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 150) {
$('#img2').fadeIn();
}
else {$('#img2').fadeOut('fast')};
if (y > 300) {
$('#img3').fadeIn();
}
else {$('#img3').fadeOut('fast')};
if (y > 450) {
$('#img4').fadeIn();
}
else {$('#img4').fadeOut('fast')};
});
jsFiddle
你不能动画化background-image
属性。相反,使用标准的<img>
标签渲染图像,并将其逐渐淡出。
在一个垂直滚动的网站上使用了这个方法,当用户向下滚动时,每个"级别"的图像都会被替换。我试着使用SuperScrollorama,但在玩了一个小时后,我放弃了。这对于简单的垂直"讲故事"风格的网站来说非常棒。
首先,在header中:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 1013) {
$('#machine1swap').fadeIn('slow');
}
else {$('#machine1swap').fadeOut('fast')};
if (y > 2119) {
$('#machine2swap').fadeIn('slow');
}
else {$('#machine2swap').fadeOut('fast')};
if (y > 3216) {
$('#machine3swap').fadeIn({});
}
else {$('#machine3swap').fadeOut('fast')};
});
});//]]>
</script>
和HTML
<body>
<div id="whole_body">
<div id="centre_zone">
<img src="images/1.jpg" width="960" height="822" /><img src="images/2.png" width="960" height="591" />
<div id="machine1"><div id="machine1swap"><img src="images/3_swap2.jpg" width="960" height="450" /></div><img src="images/3_swap1.jpg" width="960" height="450" /></div>
<img src="images/4.png" width="960" height="656" />
<div id="machine2"><div id="machine2swap"><img src="images/5_swap2.jpg" width="960" height="462" /></div><img src="images/5_swap1.jpg" width="960" height="462" /></div>
<img src="images/6.png" width="960" height="635" />
<div id="machine3"><div id="machine3swap"><img src="images/7_swap2.jpg" width="960" height="442" /></div><img src="images/7_swap1.jpg" width="960" height="442" /></div>
<img src="images/8_footer.png" width="960" height="392" border="0" usemap="#Map" />
</div>
</div>
</body>
您需要编辑标题中的"(y> xxxx)"部分,以便在页面需要的任何时候淡出。我把上面的两张图像加起来,然后减去400,让它在屏幕底部淡出。
这对大多数程序员来说可能看起来很傻,但我希望它能帮助像我这样的新手正确使用