顺利更改背景图像

时间:2014-06-19 04:35:19

标签: javascript jquery html css

当页面在特定数量滚动时,我尝试将更改后的背景效果附加到正文,以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');
   }
});

背景正在改变,但没有任何效果,任何人都可以帮助应用好效果?

1 个答案:

答案 0 :(得分:0)

如果你希望背景图像改变效果不错,那么将背景图像应用于两个具有100%宽度和100%身高的div并且使用z-index正确放置的div可能会更好。

更具体地说,将第一个div放在第二个div的顶部,当你想要更改背景图像时,fadeOut第一个div。那将是一个很好的效果。我假设你可以在自己的代码上编码。