Fade in new background images on scroll

2019-06-12 17:24发布

站内问答 / jQuery
454 3 4

I'm trying to get background Images to fadeIn / fadeOut when the user scrolls down the page. In the long run I'm shooting for a time lapse effect using several background images. I've got the background images changing on scroll, but I can't seem to get them to fade from one to the next.

Here is what I've got so far - 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")'
    });
}

});

3条回答
淡お忘
2楼-- · 2019-06-12 17:48

Used this with a bit of bug shooting for a vertical scrolling site with images replaced at each "level" as the user scrolls down. I was trying to use SuperScrollorama but after kicking it around for an hour I gave up. This is great for simple vertical "story telling" style sites.

So, firstly, in the 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>

And the 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>

You need to edit the "(y > xxxx)" parts in the header to fade in at which ever point your page needs it. I added up the two images above the swap and subtracted 400 to have it fade in at the bottom of the screen.

This may seem silly to most coders but I hope it helps any other noob like myself to get this right.

查看更多
0人赞 添加讨论(0) 举报
▲ chillily
3楼-- · 2019-06-12 17:59

Here's how it works, for any one else having this problem.

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

查看更多
0人赞 添加讨论(0) 举报
该账号已被封号
4楼-- · 2019-06-12 18:10

You can't animate the background-image property. Instead, render the images with standard <img> tags and fade those in on top of one another.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)