平滑地改变背景图像

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，有100%的宽度和100%的高度的主体和正确的z-index放置。

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