0

当用户向下滚动页面时，我试图让背景图像淡入/淡出。从长远来看，我正在使用几个背景图像拍摄延时效果。我的背景图像在滚动时发生了变化，但我似乎无法让它们从一个渐变到下一个。

这是我到目前为止所得到的 - 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")'
    });
}

});
4

3 回答 3

1

对于遇到此问题的任何其他人，这是它的工作原理。

    $(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-21T13:54:15.180 回答
0

您不能为background-image属性设置动画。取而代之的是，使用标准<img>标签渲染图像并将它们淡入淡出。

于 2013-03-20T14:54:29.457 回答
0

将其与垂直滚动站点的一些错误拍摄一起使用，当用户向下滚动时，在每个“级别”替换图像。我试图使用 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）”部分以淡入页面需要它的任何位置。我将交换上方的两个图像相加并减去 400 使其淡入屏幕底部。

对于大多数程序员来说，这可能看起来很愚蠢，但我希望它可以帮助像我这样的任何其他菜鸟正确地做到这一点。

于 2013-05-30T06:01:43.597 回答