javascript - 顺利更换背景图片

Question

我尝试在页面以 50%、20%、10% 的页面速率滚动的特定量内滚动时将变化的背景效果附加到正文

这是我到目前为止得到的 Full Screen Fiddle

下面是示例代码:

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

如果您希望背景图像以漂亮的效果变化，那么将背景图像应用到两个具有 100% 宽度和 100% 主体高度并使用 z-index 正确放置的 div 可能会更好。

更具体地说，将第一个 div 放在第二个 div 的顶部，当您想要更改背景图像时，淡出第一个 div。这将是一个整洁的效果。我假设您可以自己编写代码。