視差滾動（Parallax Scrolling）的一點當心得

下面內容來源於我知乎的這個答案：http://www.zhihu.com/question/20990029/answer/21436067

假期有空，整理到博客園這邊，並作了一些語境的調整。

 

———————— 正文 ————————

 

先說說什麼是視差。

視差滾動（Parallax Scrolling）是指多層背景以不一樣的速度移動，造成立體的運動效果，帶來很是出色的視覺體驗。

通常把網頁解剖爲：背景層、內容層 和 懸浮層(貼圖層)。

當滾動鼠標滾輪的時候，各圖層以不一樣速度移動，造成視差的效果。這就是時差滾動的大體原理。 

 

 

原理是這樣，但落實到技術細節上時，實現的方法卻各類各樣。

我我的大體概括了一下：

一、以 「頁面滾動條」 做爲 「視差動畫進度條」 的；

二、以 「滾輪刻度」 看成 「動畫幀度」 去播放動畫的（或者直接稱爲「隱藏進度條」）；

三、鑑聽mousewheel事件，事件被觸發即播放動畫，實現「翻頁」效果；

 

 

下面就簡單說說1類。

爲何是1類呢？由於它很直觀，和咱們平常接觸到的視頻播放器是同樣的：

（頁面滾動條 等同於 播放器進度條）

 

 

下面，以Every Last Drop這個頁面作爲分析對象。

作滾動網頁的時候，是怎麼實現頁面的翻頁？

首先，根據頁面動畫所需的分鏡，去等比劃分進度條。

例如：共有11個分鏡，則分鏡大體能夠劃分爲：0%、10%、20%、30% .... 100%

 

但須要注意的是，整個滾動過程實際分爲兩個部分：分鏡切換 和 分鏡動畫。

咱們要預先劃分好他們的比例，如：每個分鏡，2%的進度用於分鏡切換，7%的進度用於分鏡動畫。

則進度大體能夠劃分爲：

------------------------------------------

0%(初始，分鏡1)

↓

(消耗2%用於切換分鏡)

↓

2%(徹底進入分鏡2）

↓

(消耗8%用於分鏡動畫的播放)

↓

10%(分鏡2動畫播放完畢)

↓

(消耗2%用於切換分鏡)

↓

12%(徹底進入分鏡3）

↓

...（略）

------------------------------------------

按照上面的劃分，當進度條滾動到10%的時候，就要開始進行分鏡2到分鏡3的切換，也就是所謂的翻頁。當滾動到12%時，翻頁結束。其餘分鏡如此類推。

 

 

 

這邊推薦一個作視差滾動的插件：Jarallax(Welcome to Jarallax.com)

設計思路清晰，API設計也很直觀。依賴於jQuery1.7的版本，再高的版本就不支持了哦！

另外，做者貌似已經沒有維護了...

 

 

作視差滾動，你們作關注的莫過於：如何讓滾動更加平滑？

但這個問題就太大了，這邊我就簡單回答一下吧（不細談前端技術層面的優化，如：DOM數量、頁面渲染優化這些）。

開頭處，我提到的三種實現分類，其實是這樣一個狀況：

 

1類是最自由的，用戶甚至能夠直接調整進度條，實現「快進」。

在這種設計下，用戶鼠標滾輪的最小刻度，就是動畫的一幀。由於不一樣瀏覽器之間，鼠標滾輪的最小刻度是不同的。這就致使了，在不一樣瀏覽器之間，頁面滾動過程當中，動畫播放的幀率是有差別的。若是遇到奇葩瀏覽器，鼠標滾動的最小刻度很大，動畫甚至會出現「掉幀」的狀況。

解決方法很簡單，通常採起增長頁面長度的方式，來稀釋鼠標滾輪的最小刻度。

但仍是會有一些狀況出現，如戶快拖動進度條時，「掉幀」的狀況不免仍是會出現。

 

3類的實現，滾輪只是動畫的觸發按鈕。當用戶滾動了一下鼠標，以前設計好的動畫就開始播放。當播放結束後，對滾動事件的監聽，纔會從新被激活。這種設計，弱化了交互，但提供了更優質的動畫展示。由於動畫的播放時間和幀率不是用戶控制的，是事先代碼所設定好的。

 

2類就不說了，介乎與1和3之間。

 

簡單的說，魚(流暢)與熊掌(操控性)不可得兼。

關於1類，就先到這裏吧。之後有機會，再跟你們聊聊其餘兩個類別的。

 

本文地址：http://www.cnblogs.com/maplejan/p/3538157.html