平滑更改背景圖像

Question

當頁面以50％，20％，10％的速度滾動時，我嘗試使頁面背景滾動到特定數量時，背景變化會附加到主體上

這是到目前為止我得到的全屏小提琴

下面是示例代碼：

HTML：

<div>
   <p>...</p>
   <!-- more <p> elements below -->
</div>

和腳本：

jQuery(window).scroll(function () {
   var JarakScroll = 200; // jarak scrol
   var JumlahJarakPasScroll = jQuery(window).scrollTop();
   if (JumlahJarakPasScroll > JarakScroll) {
       jQuery('html').addClass('scrolled');
   } else {
       jQuery('html').removeClass('scrolled');
   }
});

背景在變化，但沒有效果，任何人都可以幫助應用效果好？

Answer 1

如果希望背景圖像以良好的效果進行更改，則最好將背景圖像應用於兩個div，這些div的寬度為100％，高度為100％，並且正確放置了z-index。

更具體地說，將第一個div放在第二個div上方，當您想要更改背景圖像時，請淡出第一個div。 那將是一個整潔的效果。 我假設您可以自己編寫代碼。