滚动时淡入新的背景图像

当用户向下滚动页面时，我正在尝试将背景图像设置为fadeIn / fadeOut。从长远来看，我正在使用几张背景图像拍摄时间流逝效果。我已经在滚动时改变了背景图像，但我似乎无法让它们从一个到另一个渐渐消失。

这是我到目前为止所得到的 – jsFiddle

$(document).scroll(function () { if ($(this).scrollTop() > 1) { $('body').css({ backgroundImage: 'url("http://sofzh.miximages.com/jquery/sun1_web.png")' }); } if ($(this).scrollTop() > 250) { $('body').css({ backgroundImage: 'url("http://sofzh.miximages.com/jquery/sun2_web.png")' }); } if ($(this).scrollTop() > 500) { $('body').css({ backgroundImage: 'url("http://sofzh.miximages.com/jquery/sun3_web.png")' }); } if ($(this).scrollTop() > 750) { $('body').css({ backgroundImage: 'url("http://sofzh.miximages.com/jquery/sun4_web.png")' }); } });

您无法为background-image属性设置动画。相反，使用标准标记渲染图像并将这些标记淡化为彼此。

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

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

使用此function可以在垂直滚动网站上进行一些错误拍摄，并在用户向下滚动时在每个“级别”替换图像。我试图使用SuperScrollorama但是在踢了一个小时之后我放弃了。这对于简单的垂直“讲故事”风格的网站来说非常棒。

所以，首先，在标题中：

和HTML