滚动时如何使div更改不透明度？ （视差）

Question

我想知道如何创建像视差滚动效果一样的东西。 向下滚动的距离越远，div越不透明，并且在特定点之后，它又开始变得更加透明。 我知道JS / JQuery是必需的。 有人可以给我一个简单的方法来实现这一目标吗？

Answer 1

您应该使用scrolltop并实现关于数学的自己的逻辑，并且在滚动时div的不透明度会发生变化，这是以下功能：$（window）.scrollTop（）

Answer 2

我创建了一个小提琴来为您提供帮助：基本上，您可以侦听scroll事件，并根据方向控制css opacity属性。

var opc = 1;
var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
        changeOpacity(0, -0.1)       
   } else {
      changeOpacity(1, +0.1)     
   }
   lastScrollTop = st;
});

function changeOpacity (limit, amount) {
    if(opc !== limit){
        opc = opc + amount;
        $('#content').css('opacity' , opc);
    }
}

http://jsfiddle.net/Mvf67/1909/

希望这可以帮助！