什么是視差滾動?
 
為了理解它,我們來分解一下“視差滾動”這個短語:
 
視差:前景和背景中物體距離的感知差異。
滾動:屏幕上圖形或文本的二維移動。
 
將它們組合在一起,您就可以獲得視差滾動 - 網站上的設計技術,當您向上和向下滾動時,背景中的元素以與前景中的元素不同的速度移動。這在平坦的網站中創造了深度和距離的感知。
如果使用得當,它可以創造一種令人著迷的用戶體驗。然而,如果使用不當,它可能是一個非常壓倒性和混亂的體驗,有損于網站的主要目標。(必須牢記移動體驗。許多視差設計可能會減慢或阻礙移動滾動到用戶感到沮喪的程度)但是,通過一些測試,調整和最佳實踐,我們可以創建一種可以增加產品用戶體驗的體驗。

1.Jess and Russ

視差滾動婚禮網站

當兩位偉大的設計師訂婚時會發生什么?他們創造了當然最令人羨慕和最酷的婚禮網站之一!設計師Jessica Hische和Russ Maschmeyer創建了他們的婚禮網站,講述他們之間關系的故事 - 他們使用視差滾動來實現這一目標。結果是一個可愛而浪漫的故事,講述了一個迷人的故事,幾乎讓所有其他婚禮網站都感到羞愧(對已婚的朋友沒有冒犯)。雖然這對搭檔在2012年結婚,但今天仍然可以查看他們的網站。


視差滾動的網絡史
 
WebFlow的Interactions 2.0通過視差滾動講述了整個網絡的歷史,這是很有趣的。當你向下滾動時,你會看到圖片和插圖,這些圖片和插圖說明了互聯網在過去的幾年中是如何發展的。

3. Make Your Money Matter

金融界面的視差滾動


Make Your Money Matter 是傳播信用社的好消息。雖然很難讓像金融這樣的枯燥話題看起來有趣,但網站通過讓用戶通過視差滾動互動的方式來做到這一點。把網站向下滾動,到最后,你會跑到最近的信用社開設賬戶。

4. Wolfdog Raven

狼狗成長視差滾動展示網站

這個視差滾動網站的例子是一只名叫Raven的狼狗的精彩照片。這個網站展示了視差滾動的許多微妙用途,例如帶有Raven圖片的空心字母。它們與其他設計技術相輔相成,例如當圖形進入頁面時圖形稍微移動。它幾乎讓你感覺狼爬上它的獵物 - 一個非常酷的效果和一個視差滾動融入內容的例子。

5. Koox

美食網站

通過視差滾動和豐富的插圖,Koox通過一種有趣和互動的方式向用戶介紹他們的食物、餐廳和廚師。不僅僅在他們的主頁上。用戶可以通過菜單看到視差滾動的一個非常好的例子。該網站展示了不同類型的美味佳肴,用戶可以期待在餐廳滾動下來。

6. Epicurrence

戶外視差滾動網頁

Epicurrence是在科羅拉多州布雷肯里奇召開的一次會議,旨在為創意人士提供連接,參加研討會,以及參加滑雪板,滑雪和堆雪人等一系列活動 。為了幫助用戶真正沉浸在網站中,視差滾動與Rocky Mountains山脈和過去的會議參與者一起玩滑雪和滑雪板的圖像一起使用。它使網站感覺像會議本身一樣有趣。

7. Gucci

Gucci 服裝展示網頁
 
作為2018年Gucci幻覺活動的一部分,高檔服裝系列推出了一個網站,其中就包含了視差滾動示例。滾動效果與超現實插圖相結合,讓用戶置身于西班牙藝術家Ignasi Monreal心中的夢幻世界。在整個網站中,用戶可以看到Gucci的產品和服裝通過Monreal的“烏托邦幻想”模式進行解讀。這是一個非常酷,超現實的體驗,與去年對Burning Man的體驗不同。
 
8. Apple iPad Pro

ipad Pro視差滾動展示

對于iPad Pro,Apple決定創建一個視差滾動網站,讓用戶了解他們產品的所有規格和功能。滾動效果不是向上和向下滾動,而是水平的滾動體驗,因為他們從不同的角度查看產品,并看到可以用iPad做的所有不同的事情。
 
9.Lopesce
 
零食

一個互動非常有趣的網站*支票筆記*意大利冷凍魚零食,當用戶向下滾動時,lopesce會引導他們瀏覽提供的不同產品。每種產品,其成分的插圖在屏幕上舞動。這是一個獨特和古怪的網站,為獨特和古怪的產品做了一個偉大的工作,使一個其他奇怪的小吃看起來誘人和有趣。