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

背景層的滾動(最慢)

貼圖層(內容層和背景層之間的元素)的滾動(次慢)； 按照現實生活的經驗，越遠的景物移動越慢。

內容層的滾動(可以和頁面的滾動速度一致) 。

我們讓三個圖層的滾動速度不一致，就做出了簡單的差異滾動效果。

需要有一個視覺引導元素貫穿整站，。這個視覺引導會讓你在場景種有個代入感。仿佛你就隨著這個引導元素來體驗整個故事。在對設計稿分層時，設計者要定位好背景層，貼圖層和內容層之間的關系。

根據頁面自身的功能來定義是否需要貼圖層，貼圖層的存在是為了更有效的傳達視覺效果，但如果它成為了干擾，就會違背了我們使用的初衷

內容層的展現是最主要的，無論背景層和貼圖層有多少花哨，在設計師設計過程中，內容層對用戶的展示是最優先的。

網站從Listen everywhere（隨處可聽）、Search & discover（搜索與探索）、Build your collection（建立你的收藏）、Follow & share（關注和分享）、Radio（電臺）這五個緯度來介紹spotify這個音樂產品。運用合適的背景圖片營造五個場景，介紹產品的五種特性。設計者將網頁分為內容層和背景層上下兩層，運用滾動時的速率差異形成滾動視差。一屏一個場景，也可以稱為一個畫面，五個場景相互獨立，通過縱向的滾屏來實現切換。

這個網站設計者也是采用多場景式，將網頁橫向分割成多個場景，場景與場景之間通常顏色區分很明顯，用以分割場景。場景內設計者將近景的部分做了高斯模糊，從而巧妙的形成了景深視覺效果。在技術實現上，除了利用了不同分層滾動速率不一樣外，還限定了相應元素的顯示范圍。滾動時超出范圍的部分會隱藏掉，形成被遮擋的視覺上的分層效果。

這是一個產品的介紹網站，設計者非常有意思，以多場景的形式介紹了產品的幾大功能，同時在這個過程中又以產品本身為線索貫穿所有的場景。有點像是故事型和多場景型的結合。

畢竟視覺設計師輸出的視覺稿都是靜態圖片，而滾動視差網站時一個隨著滾動不斷變化的，所以設計時與傳統網頁有很多不同。在設計初期設計師要判斷這個頁面適不適合采用滾動視差。在決定采用滾動視差之后就需要設計者整理現有的內容資料，將其故事化或場景化，然后根據構思設計出關鍵狀態的視覺設計稿。傳統網頁設計師做到這一步基本上工作就已經完成，可以交給其他人不管了。但是滾動視差的網站不行，視覺設計的工作才剛剛開始，這時，你需要負責跟重構設計師講解你的設計思路，你需要怎么分層怎么運動。在重構設計師實現的時候通常并不會一帆風順，通常會因為實現成本等各種問題需要設計師返回去重新修改設計稿。通過反復的溝通，反復的磨合才能完成預想中的漂亮的滾動視差網站。