如何實現視差滾動效果的網頁？
做滾動網頁的時候，是怎麼實現頁面的翻頁？
在做時間軸的時候，一般都要調用別人的js庫。那麼這個滾動頁面，是不是也有一個js庫？滾動時每層不同滾動速率的實現原理是什麼？如何讓滾動更加平滑？
先說說什麼是視差。
視差滾動（Parallax Scrolling）是指多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。
一般把網頁解剖為：背景層、內容層和懸浮層(貼圖層)。
當滾動滑鼠滾輪的時候，各圖層以不同速度移動，形成視差的效果。這就是時差滾動的大致原理。原理是這樣，但落實到技術細節上時，實現的方法卻各種各樣。
我個人大致歸納了一下：1、以 「頁面滾動條」 作為 「視差動畫進度條」 的；2、以 「滾輪刻度」 當作 「動畫幀度」 去播放動畫的（或者直接稱為「隱藏進度條」）；3、鑒聽mousewheel事件，事件被觸發即播放動畫，實現「翻頁」效果；下面的回答，均以上述1類的實現方式為基準。
為什麼是1類呢？因為它很直觀，和我們日常接觸到的視頻播放器是一樣的：
做滾動網頁的時候，是怎麼實現頁面的翻頁？
首先，根據頁面動畫所需的分鏡，去等比劃分進度條。
例如：共有11個分鏡，則分鏡大致可以劃分為：0%、10%、20%、30% .... 100%但需要注意的是，整個滾動過程實際分為兩個部分：分鏡切換 和 分鏡動畫。
我們要預先劃分好他們的比例，如：每一個分鏡，2%的進度用於分鏡切換，7%的進度用於分鏡動畫。則進度大致可以劃分為：
------------------------------------------ 0%(初始，分鏡1) ↓ (消耗2%用於切換分鏡) ↓ 2%(完全進入分鏡2） ↓ (消耗8%用於分鏡動畫的播放) ↓10%(分鏡2動畫播放完畢)
↓ (消耗2%用於切換分鏡) ↓ 12%(完全進入分鏡3） ↓ ...（略）------------------------------------------按照上面的劃分，當進度條滾動到10%的時候，就要開始進行分鏡2到分鏡3的切換，也就是所謂的翻頁。當滾動到12%時，翻頁結束。其他分鏡如此類推。（如果題主想問的是技術實現細節，估計要失望了！）在做時間軸的時候，一般都要調用別人的js庫。那麼這個滾動頁面，是不是也有一個js庫？
隨便在google搜一下，就搜到很多關於視差滾動插件的文章：10個優秀視差滾動插件
這裡補充一點：做視差滾動頁面絕對是體力活。本著我為人人的分享精神，還是推薦一個我覺得好用湊合好用的時差滾動庫:Jarallax(Welcome to Jarallax.com)設計思路清晰，API設計也很直觀。依賴於jQuery1.7的版本，再高的版本就不支持了哦！另外，作者貌似已經沒有維護了...滾動時每層不同滾動速率的實現原理是什麼？
初中物理：單位時間相同，位移距離不同，速度也不同。
如何讓滾動更加平滑？
這個問題就太大了，能重新開一個問題了。
這邊我就簡單回答一下吧（不細談前端技術層面的優化，如：DOM數量、頁面渲染優化這些）。開頭處，我提到的三種實現分類，實際上是這樣一個情況：
但還是會有一些情況出現，如戶快拖動進度條時，「掉幀」的情況難免還是會出現。
3類的實現，滾輪只是動畫的觸發按鈕。當用戶滾動了一下滑鼠，之前設計好的動畫就開始播放。當播放結束後，對滾動事件的監聽，才會重新被激活。這種設計，弱化了交互，但提供了更優質的動畫展現。因為動畫的播放時間和幀率不是用戶控制的，是事先代碼所設定好的。
2類就不說了，介乎與1和3之間。
簡單的說，魚(流暢)與熊掌(操控性)不可得兼。
以上
PS：碼字真的很累！(╯-_-)╯ ~╩╩上一個最近在做的東西。不知道是不是樓主想要的。
獨家策劃《乙未辯法》名嘴張紹剛解讀稅收法定
用的這個庫：
skrollr - parallax scrolling for the masses
總的來說就是 這個庫就是滾動條到什麼位置，做什麼節點的響應動畫效果。
就是這樣，自己寫就是要處理兼容性和易用性的問題。
對應的一些新聞頁面總會有類似需求。恩。
比如這個頭圖的動畫：
2015全國兩會_新聞中心
比較簡單，fixed一下就實現了，scroll和mousewheel事件就ok了，但是會有一些細節bug，低端瀏覽器就別看了。滾動視差，消耗人的耐心，要你一頁一頁地滾動，不能很直觀地自己控制，很不爽，浪費時間而且動來動去的很費眼睛
推薦閱讀：
※display:inline 的元素不能用於清除浮動嗎？
※你是如何去組織項目中的 Less/Sass 代碼的？
※為什麼「margin:auto」可以讓塊級元素水平居中？
※如何讓input裡面placeholder水平居中？
※css 使用display：inline-block的問題求解？