淡入滚动新背景图像 [英] Fade in new background images on scroll

问题描述

当用户向下滚动页面时，我正在尝试使背景图像淡入/淡出.从长远来看，我正在使用多个背景图像拍摄延时效果. 我的背景图像在滚动变化，但是我似乎无法让它们从一个褪色到另一个.

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.

这是我到目前为止所拥有的- jsFiddle

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")'
    });
}

});

推荐答案

您无法设置background-image属性的动画.而是使用标准的<img>标签渲染图像，然后将其淡入淡出.

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.

这篇关于淡入滚动新背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！