背景图像之间的平滑过渡

Question

因此，我制作了此脚本，其中，随着您向下滚动页面的距离，背景会发生变化，但是我希望这样做，因此每个图像之间都有一个过渡。 因此，当您从一个图像滚动到下一个图像时，它会慢慢淡入下一个图像。 有点像视差。

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

任何解决方案表示赞赏（：

Answer 1

最简单的解决方案是通过CSS：

body {
    transition: background-image 0.5s ease-in-out;
}

编辑：我的回答可能还为时过早，因为这不是跨浏览器的解决方案。 更好的方法是使用两个具有不同背景图像的div，并使用transition: opacity 0.5s; 但是，此解决方案涉及更多的JavaScript。

Answer 2

这是一种方法。 创建两个具有position: fixed元素position: fixed ，然后在滚动时更改不透明度。 一旦超过某个滚动位置，就交换下一张图像，并使用相同的不透明度逻辑减去预期的滚动长度。

编辑：我的不透明度数学可以更精确+反向滚动时需要添加交换图像

<!-- html -->
<div class="bottom"></div>
<div class="top"></div>

/* css */
.bottom,
.top {
  position: fixed;
  background-size: cover;
  height: 100%;
  width: 100%;
}

// js
var img1 = 'url(http://i.imgur.com/rs2Ittp.jpg)'
  , img2 = 'url(http://i.imgur.com/H5QLuD6.jpg)'
  , img3 = 'url(http://i.imgur.com/KzZpgdS.jpg)'

$(document).ready(function() {
  $('.top').css("background-image", img1)
  $('.bottom').css("background-image", img2)

  $(window).scroll(function() {
    var scrollTop = $(this).scrollTop()

    if (scrollTop < 1000) {
      $('.top').css('opacity', 100 / scrollTop)
    }

    else if ($(this).scrollTop() > 1000) {
      $('.top').css("background-image", img2)
      $('.bottom').css("background-image", img3)
      $('.top').css('opacity', 100 / (scrollTop - 1000))
    }
  })
})

codepen