在屏幕上淡出新的背景图像

我试图让背景图像在用户向下滚动页面时淡入/淡出。从长远来看，我使用多个背景图像来拍摄延时效果。我已经有滚动上的背景图像变化，但我似乎无法让他们从一个到另一个淡入淡出。在屏幕上淡出新的背景图像

这里是我这么远 - 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")' 
    }); 
} 

});

来源

2013-03-20 apaul

你不能动画background-image财产。相反，使用标准<img>标签渲染图像，并将这些标签淡入淡出。

来源

2013-03-20 14:54:29 maxedison

感谢您转向正确的方向。它花了更多的研究，但我想我现在已经有了。 – apaul 2013-03-21 13:48:59

下面是它的工作原理，对于其他人有这个问题。

$(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

来源

2013-03-21 13:54:15 apaul

有一点错误拍摄了垂直滚动本站图片在每一个“级别”为用户向下滚动替换使用本。我试图使用SuperScrollorama，但踢了一个小时后我放弃了。对于简单的垂直“讲故事”风格的网站来说，这非常棒。

所以，首先，在标题：

<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）” 在标题部分处淡入永远指出你的网页需要它。我在swap上面添加了两个图像，并减去了400，以使其淡入屏幕的底部。

这对大多数编码者来说可能看起来很愚蠢，但我希望它能帮助其他像我这样的其他喜欢做这件事。

来源

2013-05-30 06:01:43

在屏幕上淡出新的背景图像

回答

相关问题