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

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

2) 它的實現(xiàn)原理是什么呢？

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

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

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

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

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

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

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

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

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

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

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

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

我們?yōu)槭裁匆o當前頁面中每個容器設(shè)置background-attachment：fixed呢？其實我們可以這樣理解這個屬性：當前每個容器的背景是不會因為滾動軸的滾動而移動的，但是滾動的同時，該容器還是會因為滾動軸的滾動而移動，所以就產(chǎn)生了上面的類似轉(zhuǎn)場動畫效果。

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

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

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

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

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

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

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

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

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

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