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

1) 那到底什么是視差滾動(dòng)呢？

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

3) 什么場(chǎng)景我們需要用到視差滾動(dòng)呢？

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

帶著這些疑問(wèn)，我們來(lái)一探究竟吧！ 視差滾動(dòng)是怎樣一個(gè)概念呢？ 首先我們還是先來(lái)了解一下什么是視差，維基百科的解釋是這樣的：

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

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

我們來(lái)看這樣一個(gè)例子吧：

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

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

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

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

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

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

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

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

我們來(lái)看看下面的視圖說(shuō)明就不難明白了。 

因?yàn)槲覀兪冀K能看到的區(qū)域是瀏覽器窗口，當(dāng)我們上下滾動(dòng)的時(shí)候，就形成這樣的視覺(jué)感受了。

不過(guò)，好像還差點(diǎn)什么，沒(méi)錯(cuò)，每個(gè)場(chǎng)景中，都有相應(yīng)的頁(yè)面元素比如，文字，圖片按照自己的方式滾動(dòng)，下面我們來(lái)看看頁(yè)面的源碼：

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

我們還可以看一下頁(yè)面的js：

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

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

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

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