加入Mockplus團隊后茵宪，我開始深入接觸設計最冰。工作過程中，也會和用戶討論一些設計項目的問題稀火。在和用戶交流過程中暖哨，我發(fā)現(xiàn)，用戶的疑問不僅包含各種各樣的Mockplus使用問題凰狞，很多時候篇裁，在解決用戶疑問的同時，我也能感受到他們對于設計創(chuàng)意的缺乏赡若。比如網(wǎng)頁項目的設計达布，可能數(shù)十個用戶的創(chuàng)意都如出一轍。
如何讓自己的網(wǎng)站設計與眾不同呢逾冬？你也許需要一些更多的靈感和技巧黍聂。
讓一個網(wǎng)站看起來酷炫，豐富身腻，具有吸引力产还。你可以添加多種多樣的設計效果和技巧。而視差滾動效果則是其中一個很不錯的選擇嘀趟。這里脐区，Mockplus團隊精心整理了20多個視差滾動網(wǎng)站設計，希望您在看完這些不錯的設計后去件，也可以使用Mockplus做出同樣創(chuàng)意滿滿的網(wǎng)頁視差原型設計坡椒。
首先扰路，什么是視差滾動設計呢？
視差滾動倔叼，英文為Parallax Scrolling汗唱，是指多層背景以不同的速度移動，形成立體的運動效果丈攒，帶來非常出色的視覺體驗哩罪。網(wǎng)頁設計中的視差效果的最常見的一種，就是用戶在向下滾動頁面或跨頁面時可以創(chuàng)建3D滾動效果巡验。視差設計如果做得好际插，將會大大提升用戶體驗，吸引更多的用戶显设。
接下來框弛，我們一起看看這些優(yōu)秀的視差滾動網(wǎng)站設計吧。
1.Femme Fatale
Femme Fatale是一家專注于文化捕捂，奢侈品瑟枫，社論和藝術的創(chuàng)意工作室。它包含了精彩的動畫互動頁面指攒，可以很好的調(diào)動訪客的情緒慷妙。當你向下滾動頁面時，頁面背景會伴隨頁面滾動條進行切換允悦，每個頁面的背景色各不相同膝擂，在頁面滾動切換時，頁面文本會以不同的速度載入隙弛，和頁面圖像等其他元素形成視差滾動架馋。
2.Every Last Drop
Every Last Drop是一個展示生活用水場景的網(wǎng)站，旨在呼吁關注地球水資源驶鹉，節(jié)約水資源绩蜻。設計師以等比例分割頁面進度條，當你向下滾動頁面時室埋，您會看到各種不同的生活場景里水資源是如何被消耗的办绝，并且展示水資源使用的占比等數(shù)據(jù)。每個場景的切換都帶有動畫視差效果姚淆。在其“Universe”頁面還增加了3D視差滾動效果孕蝉。
3.Beer Camp
Beer Camp整個網(wǎng)站頁面劃分為5個頁面層，當你滾動時會有一種“一鏡到底”的感覺腌逢。并且它的視差滾動效果非常與眾不同降淮，它既不是水平也不是垂直的，而是一種平滑縮放的效果。當你滾動頁面時佳鳖，各個層都可以連貫地依次放大到頁面最前端霍殴。加上明亮的配色和粗放的版式，創(chuàng)造出一種驚人的空間感系吩。
4.Porsche Volution
Porsche Volution完全可以看出設計師對汽車的熱愛以及對保時捷品牌的濃厚興趣来庭。整個頁面設計以視差滾動照片的形式展示了保時捷的進化，并且配有高雅的背景音樂穿挨，配色驚艷月弛。屏幕左側有一個時間軸，向下滾動時科盛，可以清晰的看到保時捷的進化歷程帽衙。
5.Spokes
Spokes Eclectic Pedicab Rides是一個提供停車和公共交通的即時解決方案的網(wǎng)站。這個網(wǎng)站號召綠色生活和經(jīng)濟生活贞绵，對以倡導騎車為中心的社區(qū)文化有極大的意義厉萝。該網(wǎng)站是漫畫風格，滾動頁面時會以不同進度載入頁面元素但壮，具有豐富的視差效果冀泻。頂部導航欄的設計也是一個亮點。
6.Hot Dot
Hot Dot和上面的視差例子又不盡相同蜡饵，它是水平視差滾動。頁面從左到右以平滑的3D視差效果推進胳施，頁面元素和純黑色背景搭配具有不錯的美感溯祸。這個網(wǎng)站也是響應移動優(yōu)先設計的一個很好例子。頁面底部有可點擊的CTA舞肆，方便用戶訪問焦辅。
7.Hobolobo
這也是一個水平視差滾動效果網(wǎng)站，但它不同之處在于它更適用于觸摸設備椿胯。但你滑動觸摸板時筷登，頁面會從左向右移動，以講故事的方式呈現(xiàn)頁面哩盲。頁面的頂部欄上有一個頁面列表前方，可與頁面一起滑動以顯示您當前位置。這個網(wǎng)站是完全漫畫形式的廉油，最驚艷的是其3D視差效果惠险。
8.Firewatch
Firewatch是一個荒野探險類的設計網(wǎng)站。該網(wǎng)站有6個移動層組成抒线，展現(xiàn)出頁面的豐富感和深度感班巩。它的視差效果僅在第一個頁面使用，當頁面滾動時嘶炭，元素向上推進抱慌，營造出一種3D效果逊桦，讓我想起《獅子王》里的經(jīng)典鏡頭。其他頁面都是平滑的靜態(tài)頁面抑进，方便用戶讀取大量的文本信息卫袒。
9.Nizo App
這絕對是我的最愛的視差滾動網(wǎng)站之一帮掉。當滾動鼠標時诸老，所有UI元素以特定的不同節(jié)奏向頁面中央聚集，形成一個排版精致的整體鸽照。當鼠標滾回時户秤，所有元素又從中心分離码秉，形象生動，極具動感鸡号。整個頁面風格干凈簡單转砖，采用了純色背景和粗文本。
10.Peugeot
這是一個很酷的網(wǎng)站鲸伴，當你滾動鼠標時府蔗，你會進入一個精彩的故事情景里。它以視差滾動的方式自動播放漫畫故事汞窗，視差效果會根據(jù)故事情節(jié)會采用水平或垂直兩種展現(xiàn)方式姓赤。
11.Bunkai
這是一個日本網(wǎng)站。當向下滾動時仲吏，有一個可愛的卡通女孩在頁面上移動不铆，頁面會根據(jù)女孩的位置載入不同的信息。視差滾動效果會在最后一個畫面結束裹唆，因此您可以閱讀所有信息而不會感到頭暈眼花誓斥。
12.Melanie Daveid
Melanie Daveid會帶給你一個數(shù)字世界的美妙體驗。精致的細節(jié)展示和品牌指南使它在視覺上有驚人的效果许帐。滾動時劳坑，頁面被分成兩部分，左側頁面靜止成畦，而右側則繼續(xù)滾動距芬，形成一種視差。
13.The Boat
這也是通過講故事的方式展示網(wǎng)站視差設計羡鸥。The Boat共有6章蔑穴，每章節(jié)以視差幻燈片形式演示了各個不同的情節(jié)，移動視差層也有利于創(chuàng)造深度感惧浴。我個人也很喜歡這種素描風格的頁面元素存和。
14.Dave Gamache
該視差滾動網(wǎng)站采用純深色背景。當你向下滾動鼠標時，界面右側有UI元素淡入淡出捐腿。此外纵朋，有一款手機會在你滾動時頁面時有節(jié)奏的旋轉。
15.Assemble
Assemble是一個免費的在線的作品集網(wǎng)站茄袖，您可以制作出精彩的作品集操软。首頁有18個美麗的主題可供選擇，這些主題以網(wǎng)格結構排列宪祥，當你向下滾動時聂薪，每各主題會依次展示，伴隨輕微的跳動載入蝗羊。
16.Walking Dead
這個網(wǎng)站很有創(chuàng)意藏澳，以視差滾動的方式講述一個驚悚的迷你僵尸電視劇。向下滾動鼠標耀找，你會看到一個喪尸如何走向不同的場景翔悠。整個故事以水平視差滾動自動播放。里面的動畫真的很棒野芒，另外背景音樂也創(chuàng)造了一種令人毛骨悚然的氛圍蓄愁。
17.Seymour Powel
該網(wǎng)站的設計師是一個多學科的設計研究團隊，有戰(zhàn)略家狞悲，品牌專家撮抓，產(chǎn)品經(jīng)理，用戶體驗師效诅，用戶界面設計師和制造商胀滚。該網(wǎng)站有不同的圖層可以增加界面深度，并且采用平滑滾動的視差效果乱投。和Porsche Volution的設計比較接近，只是配色沒有那么大膽顷编。
18.Youandigraphics
該網(wǎng)站是一個可以完全將您的設計理念變?yōu)楝F(xiàn)實的地方戚炫。設計師Irene DemetriI熱衷于創(chuàng)建美觀和直觀的響應式網(wǎng)站，適用于各種類型媳纬，各種尺寸設備的大型和小型項目双肤。這個網(wǎng)站的視差沒有那么強烈。你單擊按鈕時钮惠，不同的元素會以反方向移動茅糜，形成一種簡單的視差。
19.Bagigia
想象一下素挽，冬天里蔑赘，懷抱一個熱水袋感覺怎么樣呢？這就Bagigia的設計師的靈感來源，創(chuàng)造一個關于熱水袋展示的網(wǎng)站缩赛。當你向下滾動時耙箍，第一個網(wǎng)頁頁面會像幕布一樣升上去，切換到一個可愛的熱水袋的頁面酥馍。該網(wǎng)站的視差效果也幾乎集中在第一頁辩昆。另外，滾動時旨袒，底部有一個“拉鏈”進度條汁针，從左向右移動，很生動砚尽。
20.Anton＆Irene
我很喜歡這個網(wǎng)站的配色施无，溫暖干凈的界面。首頁的安東和艾琳穿著一件色彩鮮艷的衣服看起來很酷尉辑。當向下滾動時帆精，他們則會退后一步，同時頁面載入文本信息隧魄。粗字體和整體色彩創(chuàng)造了一種美妙的視覺體驗卓练。如果你將鼠標放在Anton＆Iren身上，就可以看到他們的臉部或一個鼻子购啄。
A:Anton＆Irene
21.Putzengel
向下滾動鼠標時襟企，會以視差滾動的方式連續(xù)顯示6個頁面。每一個頁面都是日常生活中我們做清潔的場景狮含。頁面動畫非常不錯顽悼，尤其那個垃圾自動進入垃圾桶的動畫，引人深思几迄。
A:Putzengel
22.Beckett?
該網(wǎng)站是您進行創(chuàng)意設計的一個不錯選擇蔚龙，它是一個德國網(wǎng)站，但有多種語言可以切換映胁。通過使用視差滾動來增加了網(wǎng)頁插圖的豐富度木羹。但個人覺得這個網(wǎng)站的元素有些許雜亂。
A:Beckett?
23.Lost Worlds Fairs
這也不是一個非常典型的視差滾動效果網(wǎng)站解孙，當滾動鼠標坑填，會有一個卡通人物進入一個神秘的管道，管道上有無數(shù)的窗口弛姜，可以讓該人物在頁面滾動時看到不同的場景脐瑰。這個網(wǎng)站還是有一定的趣味性，看這個人物經(jīng)歷所有場景并最終到達他的目的地非常有趣廷臼。
A:?Lost-Worlds-Fairs
以上就是Mockplus團隊整理的一些視差滾動網(wǎng)站設計例子苍在。不知道是不是對您有所幫助呢绝页？不要忘了使用Mockplus去進行網(wǎng)頁視差原型設計哦。還沒有嘗試過的小伙伴忌穿，點擊https://www.mockplus.cn下載抒寂，相信你也可以做出同樣精彩的設計。歡迎交流掠剑。
