視差滾動，這一技術最早出現是在 Nike better World，之后這一網頁技術在這些年頻繁的出現在人們的視線當中，網絡上關于視差滾動的教程和插件已經是多如牛毛， 不勝枚舉。 比如：30個讓人興奮的視差滾動、10個關于視差滾動的插件和教程、35個運用視差滾動效果的網站設計等等…

1) 那到底什么是視差滾動呢？

2) 它的實現原理是什么呢？

3) 什么場景我們需要用到視差滾動呢？

4) 有什么工具能幫助我們快速實現視差滾動效果呢？

帶著這些疑問，我們來一探究竟吧！ 視差滾動是怎樣一個概念呢？ 首先我們還是先來了解一下什么是視差，維基百科的解釋是這樣的：

視差，就是從有一定距離的兩個點上觀察同一個目標所產生的方向差異。從目標看兩個點之間的夾角，叫做這兩個點的視差，兩點之間的距離稱作基線。只要知道視差角度和基線長度，就可以計算出目標和觀測者之間的距離。視差可用觀測者的兩個不同位置之間的距離（基線）在天體處的張角來表示。 可以從圖中看到，隨著觀測點從一測移至另一側，路邊的河水和花草讓人感覺遠處的大山出現緩慢移動。 既然理解了視差，我們可以進一步來看下面這張圖：

在圖中，我們可以看到，雖然多個建筑只是在按照自己的速度進行軌跡運動，但是在視覺上卻行成一種新的體驗，在web設計中，通過運用多層背景在以不同速度運動的情況下，形成的一種立體的運動效果，這種視覺體驗，我們稱之為視差效果。 那么在Web上是如何實現視差滾動的呢？ 雖然網絡上那些優秀的視差滾動效果層出不窮，但其實也都是基于一些最基礎的視差動畫制作而來的，所以我們可以先從一個簡單的小例子來分析：

我們來看這樣一個例子吧：

這個頁面有五個畫面，然后通過瀏覽器窗口將整個頁面分割成多個場景。 經過分析以后，其實我們可以很輕松的實現這樣的效果，我們可以通過五個畫面來組成這樣一個頁面，代碼如下：

然后我們給這五個容器設置相應的背景，讓頁面變的豐富起來，并將背景圖片相對于瀏覽器窗口固定，樣式文件如下：

為了能更接近實例，我給所有頁面設置了一個統一高度，這個高度相對于頁面容器總是要少10%,為了就是能更貼近實際效果。

當我們滾動這個頁面的時候，可以看到圖片出現了簡單的切換效果，只是通過給背景設置 background-attachment:fixed;這樣一個css屬性，便實現了一個簡單的視差效果。雖然它現在看起來還很簡陋。

那么我們還是先來了解一下，background-attachment到底是一個怎樣的屬性呢？我們來看看官方文檔的解釋：

background-attachment –屬性設置背景圖像是否固定或者隨著頁面的其余部分滾動。 取值有: scroll | fixed | inherit scroll: 隨著頁面的滾動軸背景圖片將移動 fixed: 隨著頁面的滾動軸背景圖片不會移動 inherit: 繼承初始值: scroll

我們為什么要給當前頁面中每個容器設置background-attachment：fixed呢？其實我們可以這樣理解這個屬性：當前每個容器的背景是不會因為滾動軸的滾動而移動的，但是滾動的同時，該容器還是會因為滾動軸的滾動而移動，所以就產生了上面的類似轉場動畫效果。

經過測試除了IE6以外都是可以支持background-attachment這個屬性的，當然IE6并不是不支持，只是支持的標簽有限，僅僅支持body和html的標簽。

我們來看看下面的視圖說明就不難明白了。 

因為我們始終能看到的區域是瀏覽器窗口，當我們上下滾動的時候，就形成這樣的視覺感受了。

不過，好像還差點什么，沒錯，每個場景中，都有相應的頁面元素比如，文字，圖片按照自己的方式滾動，下面我們來看看頁面的源碼：

我們可以看到頁面中分別為這幾個元素都添加了data-type類型，data-speed速度，background-position屬性，隨著滾動軸滾動，background-position的值發生相應的改變。 data-type=”background”和data-speed=”8″分別是定義一個數據類型和 當前元素的速度取值，用來向JS里傳遞參數，background-position則是用來定義背景的位置；

我們還可以看一下頁面的js：

作者大體的意思是這樣的： 通過遍歷帶有data-type的元素，讀取相應元素的位置和滾動速度，找到相應的data-type=”background”，存儲當前的基礎變量，然后當窗口滾動時，先通過計算滾動條高度和窗口高度判斷當前元素是否在視野中，從而改變相應的元素的值。簡單點說，頁面的js是通過監聽scroll事件來實現的。

這個例子，雖然簡單，只是用js反向滾動背景，就達到了視差滾動的效果，看上去還不錯。 許多優秀的視差滾動也都是通過多層的背景，按不同的速度，不同的方向，不同的效果去運動從而配合實現的。

原理我們已經知道了，那什么情況我們需要用到視差滾動呢？ 個人覺得：首先視差滾動是通過大量的背景和元素組成，也就意味著需要大量的背景圖片，通過高分辨率的大圖，吸引用戶瀏覽，讓用戶的視線停留在背景上，當然我們需要考慮頁面的加載情況，所以不少視差滾動頁面會提前添加loading動畫。

其次，需要設計好各個圖層中元素和背景的關系，通過好的設計來傳達視覺效果，不要讓頁面變的花哨無趣，最好給頁面一個敘事感，通過頁面的元素，能夠傳達一個有趣的故事等。要注意的是，內容真的很重要，技術只是手段。