Javascript 背景图像之间的平滑过渡

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

JS:

---

欢迎使用任何解决方案：

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

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

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

创建两个位置为“固定”的元素，然后在滚动时更改不透明度。一旦你越过了一个特定的滚动位置，交换下一个图像，并使用相同的不透明度逻辑减去预期的滚动长度

编辑：我的不透明度数学可能会更精细+需要添加在反向滚动时将图像交换回来

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

---

通过在某些滚动点的元素上添加和删除类，您的答案是有意义的。您可以通过使用autoprefixer和sass、less或我最喜欢的手写笔轻松克服跨浏览器问题。代码笔可以帮你汉克斯，这就是我要找的！但当我满足时，它就不起作用了。我应该把网站内容放在哪里？在顶部和底部之间？

<!-- 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))
    }
  })
})