這是摘自百度百科：

視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。作為今年網頁設計的熱點趨勢，越來越多的網站應用了這項技術。什么是視差滾動？

視差效果，原本是一個天文學術語，當我們觀察星空時，離我們遠的星星移動速度較慢，離我們近的星星移動速度則較快。當我們坐在車上向車窗外 看時，也會有這樣的感覺，遠處的群山似乎沒有在動，而近處的稻田卻在飛速掠過。許多游戲中都使用視差效果來增加場景的立體感。說的簡單點就是網頁內的元素在滾動屏幕時發生的位置的變化，然而各個不同的元素位置變化的速度不同，導致網頁內的元素有層次錯落的錯覺，這和我們人體的眼球效果很像。我看到多家產品商用視差滾動效果來展示產品，從不同的空間角度和用戶體驗，起到了非常不錯的效果。

目前這種視差滾動效果被越來越多的國外網站所應用， 成為網頁設計的熱點趨勢。

通過一個很長的網頁頁面，其中利用一些令人驚嘆的插圖和圖形，并使用視差滾動（Parallax Scrolling）效果，讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。完美的展示了一個復雜的過程，讓你猶如置身其中。厭倦了千篇一律，呆板網頁設計的你不防一試。

1.原理

視差滾動原理是什么樣的？從這一句就能知道：

當我們觀察星空時，離我們遠的星星移動速度較慢，離我們近的星星移動速度則較快。

因此在網頁開發中我們讓不同的層移動速度不一樣就能達到這種效果。

2.層

對于網頁開發人員來說，層的概念很熟悉；上面介紹讓不同的層以不同速率滾動，那我們如何劃分層，常見的這樣劃分：背景層、內容層、貼圖層（內容與背景之間的層）這里劃分三層并不是只有三層的意思，例如貼圖層可能就有兩層，兩層滑動速率不一樣；只是為了便于區分劃分為貼圖層，在這里沒有明確規定幾層，憑網頁需要效果，如果復雜就可以多產生幾層。

3.實現

簡單實現：

最簡單方法的之一：使背景固定不動

background-attachment:fixed

使背景不動，頁面內容滑動，就產生分層的感覺，但立體效果不強，基本感覺不到

進階：使背景以一定的速度滾動要比頁面內容滾動慢

background-position:

在次需要用到js來操作，當滾動條滾動時，背景位置發生改變，例如當滾動條滾動100px;背景圖位置只上移10px,這樣就能看到一些立體效果。

熟練：

熟練只后我們就可以利用js讓背景層，貼圖層以各種不同的速率滾動，這樣立體效果越明顯

4.注意

當大量使用視差滾動的時候，對用戶來說交互就少，因為都是按照開發者的效果滾動；再次會對頁面導航有一定影響，因此頁面需要較強的導航。

最后視差滾動的插件有很多，但建議對于較小的視差滾動效果還是自己手寫代碼為好，至于為啥？因為我覺得用插件不至于。還有在這里沒有放源碼，可能讀起來有些生澀！但基本原理基本就是這樣，如有紕漏，敬請指正。

給自己做個推廣

個人網站：百咧個度，歡迎訪問！

微博：柯琦-閑言碎語歡迎關注！