進(jìn)入網(wǎng)站設(shè)計制作行業(yè)后，我開始深入接觸設(shè)計。工作過程中，也會和用戶討論一些設(shè)計項目的問題。在和用戶交流過程中，我發(fā)現(xiàn)，用戶的疑問不僅包含各種各樣的Mockplus使用問題，很多時候，在解決用戶疑問的同時，我也能感受到他們對于設(shè)計創(chuàng)意的缺乏。比如網(wǎng)頁項目的設(shè)計，可能數(shù)十個用戶的創(chuàng)意都如出一轍。
如何讓自己的網(wǎng)站設(shè)計與眾不同呢？你也許需要一些更多的靈感和技巧。
讓一個網(wǎng)站看起來酷炫，豐富，具有吸引力。你可以添加多種多樣的設(shè)計效果和技巧。而視差滾動效果則是其中一個很不錯的選擇。這里，福田網(wǎng)站建設(shè)制作公司精心整理了 20 多個視差滾動網(wǎng)站設(shè)計，希望您在看完這些不錯的設(shè)計后，也可以使用Mockplus做出同樣創(chuàng)意滿滿的網(wǎng)頁視差原型設(shè)計。
首先，什么是視差滾動設(shè)計呢？
視差滾動，英文為Parallax Scrolling，是指多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。網(wǎng)頁設(shè)計中的視差效果的最常見的一種，就是用戶在向下滾動頁面或跨頁面時可以創(chuàng)建3D滾動效果。視差設(shè)計如果做得好，將會大大提升用戶體驗，吸引更多的用戶。
接下來，我們一起看看這些優(yōu)秀的視差滾動網(wǎng)站設(shè)計吧。
1. Femme Fatale網(wǎng)站制作設(shè)計案例
Femme Fatale是一家專注于文化，奢侈品，社論和藝術(shù)的創(chuàng)意工作室。它包含了精彩的動畫互動頁面，可以很好的調(diào)動訪客的情緒。當(dāng)你向下滾動頁面時，頁面背景會伴隨頁面滾動條進(jìn)行切換，每個頁面的背景色各不相同，在頁面滾動切換時，頁面文本會以不同的速度載入，和頁面圖像等其他元素形成視差滾動。
2. 網(wǎng)站制作設(shè)計案例之Every Last Drop
Every Last Drop是一個展示生活用水場景的網(wǎng)站，旨在呼吁關(guān)注地球水資源，節(jié)約水資源。設(shè)計師以等比例分割頁面進(jìn)度條，當(dāng)你向下滾動頁面時，您會看到各種不同的生活場景里水資源是如何被消耗的，并且展示水資源使用的占比等數(shù)據(jù)。每個場景的切換都帶有動畫視差效果。在其“Universe”頁面還增加了3D視差滾動效果。
3. 網(wǎng)站視覺設(shè)計案例之Beer Camp
Beer Camp整個網(wǎng)站頁面劃分為 5 個頁面層，當(dāng)你滾動時會有一種“一鏡到底”的感覺。并且它的視差滾動效果非常與眾不同，它既不是水平也不是垂直的，而是一種平滑縮放的效果。當(dāng)你滾動頁面時，各個層都可以連貫地依次放大到頁面最前端。加上明亮的配色和粗放的版式，創(chuàng)造出一種驚人的空間感。
4. Porsche Volution網(wǎng)頁設(shè)計案例
Porsche Volution完全可以看出設(shè)計師對汽車的熱愛以及對保時捷品牌的濃厚興趣。整個頁面設(shè)計以視差滾動照片的形式展示了保時捷的進(jìn)化，并且配有高雅的背景音樂，配色驚艷。屏幕左側(cè)有一個時間軸，向下滾動時，可以清晰的看到保時捷的進(jìn)化歷程。
5. 網(wǎng)站設(shè)計案例Spokes
Spokes Eclectic Pedicab Rides是一個提供停車和公共交通的即時解決方案的網(wǎng)站。這個網(wǎng)站號召綠色生活和經(jīng)濟(jì)生活，對以倡導(dǎo)騎車為中心的社區(qū)文化有極大的意義。該網(wǎng)站是漫畫風(fēng)格，滾動頁面時會以不同進(jìn)度載入頁面元素，具有豐富的視差效果。頂部導(dǎo)航欄的設(shè)計也是一個亮點。
6. Hot Dot網(wǎng)頁設(shè)計風(fēng)格案例
Hot Dot和上面的視差例子又不盡相同，它是水平視差滾動。頁面從左到右以平滑的3D視差效果推進(jìn)，頁面元素和純黑色背景搭配具有不錯的美感。這個網(wǎng)站也是響應(yīng)移動優(yōu)先設(shè)計的一個很好例子。頁面底部有可點擊的CTA，方便用戶訪問。
7. Hobolobo網(wǎng)頁制作設(shè)計案例
這也是一個水平視差滾動效果網(wǎng)站，但它不同之處在于它更適用于觸摸設(shè)備。但你滑動觸摸板時，頁面會從左向右移動，以講故事的方式呈現(xiàn)頁面。頁面的頂部欄上有一個頁面列表，可與頁面一起滑動以顯示您當(dāng)前位置。這個網(wǎng)站是完全漫畫形式的，最驚艷的是其3D視差效果。
8. Firewatch
Firewatch是一個荒野探險類的設(shè)計網(wǎng)站。該網(wǎng)站有 6 個移動層組成，展現(xiàn)出頁面的豐富感和深度感。它的視差效果僅在第一個頁面使用，當(dāng)頁面滾動時，元素向上推進(jìn)，營造出一種3D效果，讓我想起《獅子王》里的經(jīng)典鏡頭。其他頁面都是平滑的靜態(tài)頁面，方便用戶讀取大量的文本信息。
9. APP前端動態(tài)設(shè)計案例Nizo App
這絕對是我的最愛的視差滾網(wǎng)站之一。當(dāng)滾動鼠標(biāo)時，所有UI元素以特定的不同節(jié)奏向頁面中央聚集，形成一個排版精致的整體。當(dāng)鼠標(biāo)滾回時，所有元素又從中心分離，形象生動，極具動感。整個頁面風(fēng)格干凈簡單，采用了純色背景和粗文本。
10. 動漫前端網(wǎng)站設(shè)計制作案例Peugeot
這是一個很酷的網(wǎng)站，當(dāng)你滾動鼠標(biāo)時，你會進(jìn)入一個精彩的故事情景里。它以視差滾動的方式自動播放漫畫故事，視差效果會根據(jù)故事情節(jié)會采用水平或垂直兩種展現(xiàn)方式。
11. 網(wǎng)站制作設(shè)計案例Bunkai
這是一個日本網(wǎng)站。當(dāng)向下滾動時，有一個可愛的卡通女孩在頁面上移動，頁面會根據(jù)女孩的位置載入不同的信息。視差滾動效果會在最后一個畫面結(jié)束，因此您可以閱讀所有信息而不會感到頭暈眼花。
12. Melanie Daveid
Melanie Daveid會帶給你一個數(shù)字世界的美妙體驗。精致的細(xì)節(jié)展示和品牌指南使它在視覺上有驚人的效果。滾動時，頁面被分成兩部分，左側(cè)頁面靜止，而右側(cè)則繼續(xù)滾動，形成一種視差。
13. The Boat網(wǎng)站設(shè)計案例
這也是通過講故事的方式展示網(wǎng)站視差設(shè)計。The Boat共有 6 章，每章節(jié)以視差幻燈片形式演示了各個不同的情節(jié)，移動視差層也有利于創(chuàng)造深度感。我個人也很喜歡這種素描風(fēng)格的頁面元素。
14. Dave Gamache純色動態(tài)網(wǎng)站制作案例
該視差滾動網(wǎng)站采用純深色背景。當(dāng)你向下滾動鼠標(biāo)時，界面右側(cè)有UI元素淡入淡出。此外，有一款手機會在你滾動時頁面時有節(jié)奏的旋轉(zhuǎn)。
15. Assemble網(wǎng)站前端動態(tài)設(shè)計案例
Assemble是一個免費的在線的作品集網(wǎng)站，您可以制作出精彩的作品集。首頁有 18 個美麗的主題可供選擇，這些主題以網(wǎng)格結(jié)構(gòu)排列，當(dāng)你向下滾動時，每各主題會依次展示，伴隨輕微的跳動載入。深圳網(wǎng)站建設(shè)公司博納網(wǎng)絡(luò)編輯整理。
