視差效應仍然是最熱門的網頁設計趨勢之一。這種動畫滾動技術發生在背景和前景以不同的速度移動的同時用戶滾動，以便有兩個獨立的圖層同時移動。
這種效果可以用于任何數量的網站類型，并且是創建和增加用戶參與度的有趣方式。視差效果的好處在于，您不必在設計的每一頁上都使用它們，視差滾動是一個偉大的主頁技術，可以幫助用戶調用操作或其他內容。
視差效果創造了深度和距離的元素，比其他技術更具有三維感，使用戶感覺像是設計的一部分。
視差效應的缺點是，它們并不總是在移動設備上顯示。（但在本文最后的教程中也有一些解決方法。）
這里尚略廣告
上海網站設計帶來五個視差效果的風格案例給大家做進一步的介紹。（請確保點擊鏈接查看每個動畫的工作原理。）
1.動畫顯示更改
http://porschevolution.com/
http://sonance-audition.fr/
使用視差效果來顯示項目中的變化。運動層可以傳達時間，空間或位置的距離。視差效果在與網站內容一起工作時最能展現變化。
上面的保時捷演變顯示隨著時間的推移，隨著每個圖像前景的背景和汽車的變化。（把聲音轉起來，音樂也改變十年。）該設計讓用戶滾動，因為你想看看接下來的車會是什么樣子。這種技術可以按照時間順序（如這里所看到的）或反向的時間順序工作。而使其工作的一個關鍵是，這個網站在兩個方向工作 - 即使音樂回來 - 如果你上下滾動。
Sonance使用視差來顯示另一種變化 - 在整個設計中的位置變化。視差效果是網站整體導航模式的一部分，用戶在設計（位置）的整個體驗中都有一個提示。
2.鼓勵滾動
http://www.cabletv.com/the-walking-dead
http://www.firewatchgame.com/
視差效應可以幫助創建互動的原因是因為他們鼓勵滾動，以保持用戶與設計更長時間的互動。
許多具有視差效果的設計包括在主頁上的“滾動”指令或提示，以幫助從一開始就鼓勵這種互動。（行尸走肉的主頁在上面的精選圖片之前的頁面上包含了這個說明。）
“行尸走肉”網站與視差有些不同，鼓勵互動 - 當角色通過不同的漫畫式面板移動時，滾動將用戶穿過屏幕，而不是上下移動。
3.運動和顏色
https://www.werkstatt.fr/home
http://www.loisjeans.com/es/ss2015/campaign
使用視差滾動的最有趣的方法之一是將顏色合并到不同的內容“面板”中以展示元素或項目組合項目。顏色變化和動畫可以表示一些新的東西。顏色也是一個引人注目的設計工具，可以幫助吸引用戶。
上面的Werkstatt使用元素和文本之間具有視差層的開始白色和灰色輪廓。但是另外的懸停行動使每個項目都帶有顏色。效果的組合效果很好，因為設計的其余部分很簡單，它鼓勵用戶與每個單獨的元素交互。
Lois Jeans采用另一種使用顏色的視差方法。每種新的顏色突出了服裝活動的不同部分 - 購物者可以在不同自然環境中的火，空氣，水和地球模型上看到牛仔褲。
4.使信息更容易消化
http://melaniedaveid.com/
http://restaurantleduc.com/
視差效應可以幫助復雜的信息或較大的文本塊更小，更易讀，更容易消化。當您考慮移動類型時，這是一個有趣的概念，但實際操作涉及移動容器的類型。上面的例子顯示了這個概念的兩個不同的應用。
梅拉妮·戴維（Melanie David）在屏幕上對她進行了長篇介紹。顯示導航元素 - 關于 - 的左側不會移動，而用戶可以滾動瀏覽右側的文本。當文本塊結束時，頁面的兩側移動到下一節。對于比可視內容區域更長的文本塊，這是一個很好的解決方案。
Le Duc餐廳根據您閱讀和訂購食物的方式，使用單獨的區塊瀏覽菜單的不同部分。動畫很簡單，有趣的魚背景 - 告訴用戶關于餐飲的一些東西 - 并使菜單易于消化。
5.形象化“數字”現實
http://www.madwell.com/team
https://www.spaceneedle.com/home/
視差效果的最大用途之一是幫助用戶可視化一些他們無法看到的東西。更多的設計正在使用三維和視差動畫的組合來創造更逼真的體驗。這些3D設計傾向于落在更多的卡通風格體驗領域，比如上面的Madwell，但是當設計與特定類型的設備一起工作時，也可以具有更多的VR感覺。
西雅圖太空針網站是使用視差效應已經存在一段時間的網站的典型例子之一。它使用向上滾動技術來模仿如何騎到地標的頂部。
視差滾動移動天際線對建筑物的內部與一些號召性的消息和一個偉大的導航欄，顯示了多高的位置。設計是教育性的，冒險的，并向用戶展示一些在沒有動畫效果的情況下難以想象的東西。
3大視差資源
準備為您的下一個項目創建視差效果？這些教程和代碼片段將幫助您為您的設計添加動畫效果，以幫助吸引用戶并延長其吸引力。
如何創建視差滾動效果：w3schools教程將引導您創建移動的容器效果，并提供使用媒體查詢的方法，以在移動設備上獲得類似的效果。
結論
雖然視差效果是時髦和有趣的，但并不適合每個項目。考慮到某些設備上的某些觀眾可能會在瀏覽包含大量動畫的網站時遇到困難也很重要。在添加視差效果之前，請清點您的用戶和他們的偏好。在一個位置（如主頁）開始小視差，并跟蹤分析，看看它是否為你工作（增加現場的時間，它是一個線索，它正在工作）。
在與內容和消息傳遞協同工作時使用視差。這個時髦的技術應該是有趣的設計和互動。
網站設計教程分享，尚略廣告，上海網站設計公司，上海品牌設計公司。
本文網址：http://m.fc1937.com/news_info.asp?id=3189，轉載請注明出處。