所以,我制作了这个脚本,其中背景随着页面向下滚动而改变,但我希望每个图像之间都有一个过渡。因此,当您从一张图像滚动到下一张图像时,它会慢慢淡入下一张图像。有点像视差。
JS:
$(document).ready(function() {
$("body ").css("background-image", "url('http://i.imgur.com/rs2Ittp.jpg')");
$(window).scroll(function() {
if($(this).scrollTop() > 0) {
$("body ").css("background-image", "url('http://i.imgur.com/rs2Ittp.jpg')");
}
if($(this).scrollTop() > 1000) {
$("body ").css("background-image", "url('http://i.imgur.com/H5QLuD6.jpg')");
}
if($(this).scrollTop() > 2000) {
$("body ").css("background-image", "url('http://i.imgur.com/KzZpgdS.jpg')");
}
if($(this).scrollTop() > 3000) {
$("body ").css("background-image", "url('http://i.imgur.com/UsLLJSx.jpg')");
}
});
});
任何解决方案都值得赞赏(:
最佳答案
最简单的解决方案是通过 CSS:
body {
transition: background-image 0.5s ease-in-out;
}
编辑:我的回答可能有点为时过早,因为这不是跨浏览器解决方案。更好的方法是使用两个具有不同背景图像的 div,并使用 transition: opacity 0.5s;
不过,此解决方案涉及更多的 javascript。
关于javascript - 背景图像之间的平滑过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30144656/