視差在目前看來仍然是最熱門的網頁設計趨勢之一。當用戶在滾動頁面的同時，背景和前景以不同的速度移動，形成兩個獨立層在視覺上面時差的移動方式，這種動畫滾動效果就會產生了。

這種效果幾乎可以應用于任何類型的網站設計中，而且可以通過一種有趣的方式來創建和增加用戶的參與。視差效果的好處在于你不必在設計的每一頁都使用它們，通過視差滾動來優化主頁是一個最普遍的來幫助推動用戶實施行動或瀏覽頁面的其他內容。

視差效果創造了元素之間的深度和距離，比其他一些技術更有意義，讓用戶覺得自己是設計的一部分。

缺點在于它們并不總是能夠在移動設備上工作(但在本文結尾的教程中，也有一些變通方法)。

以下，我們將通過五個視差效果和樣式來考慮在實際的網站建設項目中，你具體應該選擇哪一類。

1.動畫顯示變化




使用視差效果來顯示項目中元素的變化，運動的層次可以在時間、空間或位置上傳遞一段距離。

視差效果能夠最好的展示改變，當它們被用于強調頁面的內容時。

在上面Porsche Evolution的網頁設計案例中，你可以發現隨著時間的變化，背景和汽車的外形同樣在發生變化(如果你把頁面中的背景樂開啟的話，音樂也會在根據時間發生改變)。

這個設計能夠吸引用戶繼續滾動這個頁面，因為好奇心驅使他們想看看接下來汽車會是什么樣子。這項技術可以按時間順序工作（如上圖所示，也可以按時間倒序排列。讓它發揮作用的關鍵是，這個網站在兩個方向上都能工作——即使是音樂也可以——如果你向下滾動的話。

Sonance的設計使用視差來顯示另一種變化——在整個設計過程中的位置變化。視差效果是網站整體導航模式的一部分，作為設計(位置)用戶的整個體驗過程中有一個提示。

2.鼓勵滾動






視差可以幫助創建網頁與用戶之間的聯系，因為它們可以鼓勵用戶繼續滾動，以使用戶與設計進行更長的交互。

許多具有視差效果的設計在頁面上都包含了“滾動”指令或在主頁上含有提示信息，以幫助鼓勵用戶從一開始就參與到互動中（《行尸走肉》的主頁在上面的圖片中包含了這條信息。）

《行尸走肉》在其網站設計中做了一些與普通視差效果不同的事情，以鼓勵用戶參與互動——滾動會讓用戶感覺自己在屏幕上移動，因為角色會在不同的漫畫風格的面板中水平移動，而不是上下移動。

3.運動和顏色





使用視差滾動的最有趣的方法之一是將顏色合并到不同的內容“面板”中，以展示不同的元素或組合。色彩的變化或動畫可以代表一些新的東西。

顏色同時也是一個吸引眼球的設計工具，可以幫助吸引用戶。

在上面Werkstatt的設計中，元素和文本之間在最開始使用一個白色和灰色的輪廓，但是懸停動作使每個元素都有了色彩。效果的組合很好，因為其余的設計很簡單，它鼓勵用戶與每個單獨的元素交互。

Lois Jeans采用了另一種使用顏色的視差方法。每一種新顏色都突出了服裝運動的不同部分——購物者可以在不同的自然環境元素下看到牛仔褲，包括火、空氣、水和泥土。

4.讓信息更容易消化





視差可以幫助使復雜的信息或沉重的文本塊變得更小、更易讀、更容易消化。當你想到移動文本時，實際的實踐過程涉及到移動容器的類型，這是一個有趣的概念。

上面的例子展示了這個概念的兩個不同的應用。

Melanie David在屏幕上寫了一段很長的介紹。而左側顯示導航元素- About -你會注意到這一塊是不移動的，而用戶通過滾動，可以向下繼續瀏覽右邊的文本。當文本塊結束時，頁面的兩端移動到下一節。對于比視覺內容區域更長的文本塊來說，這是一個很好的解決方案。

Le Duc餐廳根據你閱讀和訂購食物的方式，在菜單的不同部分使用單獨的塊。動畫很簡單，有趣的魚背景——它告訴用戶一些關于餐廳的東西——并使菜單易于消化。

5.想象“數字”的現實





視差效果最大的用途之一是幫助用戶可視化一些他們無法看到的東西。更多的設計是利用三維和視差動畫結合創造更真實的體驗。

這些3D設計往往更多出現在卡通風格類型的體驗領域，如上面的Madwell。但當設計與一種特定類型的設備一起工作時，也會有更多的VR感覺。

The Seattle Space Needle的網站設計是另一個使用視差效應的典型例子，它已經存在了一段時間。它使用一種向上滾動的技術來模擬它將如何到達地標的頂部。

“視差”滾動在建筑物內部的天際線上移動，有一些動作信息和一個很棒的導航欄，可以顯示出位置的高度。這個設計具有教育意義，富有冒險精神，并向用戶展示了難以想象的東西。

6.一些關于視差效果的參考資源

你或許已經準備好為下一個網站設計項目創建視差效應了，這些教程和代碼片段將幫助你在設計中添加一個適合的動畫效果，通過他們可以幫助吸引用戶并使他們保持停留更長的時間。

在添加視差效果之前，對你的用戶和他們的首選項進行數據分析。你可以先在一個特定的頁面中(比如主頁)進行跟蹤分析測試，看看它是否對你有效(增加了站點上的時間，提示它正在工作)。

· How to Create a Parallax Scrolling Effect：這是一篇w3schools的教程，教你如何創建一個移動的容器效果，并提供了如何使用媒體查詢來在移動設備上獲得類似效果的方法。

· Parallax Scrolling Website Demo：通過一個簡單的演示和解釋來幫助你掌握“視差”技巧。

· 15 Captivating Parallax Effects from CodePen：清單展示了一些很棒的視差效果，可以激發你的創造力。

總結

雖然視差效應是流行的和有趣的，但它們并不適用于每個項目。同樣重要的是，一些設備的用戶可能會在一個包含大量動畫的網站上糾結。

在網頁設計中添加視差效果之前，對您的用戶和他們的首選項進行盤點。在一個位置(比如主頁)和跟蹤分析開始，看看它是否對你有效。

使用視差來處理內容和消息。這種新潮的技術應該可以增強設計和互動之間的樂趣。