視差與衰落效應背景圖像？

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」事件。