视差与衰落效应背景图像？

Question

要开始建设单页网站，视差效应，视差效果是新的我，怎么可以编码相同，如下面的参考网站https://www.fitbit.com/in/charge。

请协助完成任务。

Answer 1

退房这个fullpage plugin。

的视差效应的关键点是监视窗口的“scrollTop的”。您也可以emplement您的视差页面，没有任何第三方的lib

var $win = $(window); 
    $win.on('scroll',function(){ 
     var top = $win.scrollTop(); 
     if(top > ... &&　top < ...){ 
      //do something 
     }else if(top > ... && top < ...){ 
      // do something else 
     } 

    }) 

和你给出的参考网站是这样实现：

一个。创建两层，一个正常（A部分）和一个固定位置（B部分）。 A部分分为三节（A节，B节，C节）; A部分： 部A， 部分B（高度= $（窗口）.height（）* 4）， C节 B部分： 高度= $（窗口）.height（），显示：无;

b。监视$（window）.scrollTop（），当用户向下滚动$（window）.height（） - sectionA.height时，显示partB。

c。由于您只是使用固定位置的图层覆盖partA，用户仍然可以向下滚动。你可以根据$（window）.scrollTop（）来做某些事情。 d）。当$（window）.scrollTop> sectionA.height + sectionB.height - $（window）.height。隐藏partB，用户只能看到sectionC。

顺便说一句，如果你尝试着自己来实现视差效果，不要忘了，因为一旦窗口大小调整，一切都改变了处理“window.resize”事件。