背景圖像之間的平滑過渡

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