在視差滾動(dòng)網(wǎng)頁的設(shè)計(jì)中，無論是移動(dòng)終端還是桌面終端，今天的設(shè)計(jì)師已經(jīng)有了足夠深入的探索，在挖掘功能和體驗(yàn)方面有了更加成熟的經(jīng)驗(yàn)。無論是導(dǎo)航懸停滾動(dòng)還是水平滾動(dòng)和分屏3D特效，視差滾動(dòng)的設(shè)計(jì)趨勢(shì)深刻影響了今天的UI設(shè)計(jì)。今天我們要推薦10個(gè)值得學(xué)習(xí)的視差滾動(dòng)網(wǎng)頁設(shè)計(jì)作品，都是設(shè)計(jì)上獨(dú)一無二的。

　　視差滾動(dòng)效果

　　視差滾動(dòng)特效是在滾動(dòng)頁面的過程中，不同的元素以不同的速率移動(dòng)而產(chǎn)生的接近3D的視覺效果。視差源于希臘語“視差”，意思是變化。視差本質(zhì)上是一種幻覺，但實(shí)際上它只是一種特殊的效果。這種效果是由前景元素之間以及前景和背景之間的運(yùn)動(dòng)速度差異造成的。視差滾動(dòng)效果為網(wǎng)站和應(yīng)用創(chuàng)造了無縫流暢的用戶體驗(yàn)，這也是它的價(jià)值所在。

　　1.Fluttuo:長滾動(dòng)視差效果

　　Fluttuo的頁面設(shè)計(jì)足夠優(yōu)秀，動(dòng)畫流暢，色彩對(duì)比鮮明。文字字體在干凈的界面中顯得華麗而穩(wěn)重，整個(gè)網(wǎng)站的視覺在最好的電商網(wǎng)站中是出類拔萃的。加上視差效果，整個(gè)網(wǎng)站的瀏覽和購物體驗(yàn)將再次提升。

　　網(wǎng)站的背景和前景的元素位于不同的層。當(dāng)預(yù)加載的前景元素隨著用戶滾動(dòng)時(shí)，會(huì)出現(xiàn)視差效果。背景層承載主要內(nèi)容，塑造整體風(fēng)格，而前景的元素協(xié)同展示產(chǎn)品細(xì)節(jié)和主要故事。

　　流暢的視差滾動(dòng)和傳送帶動(dòng)畫賦予頁面良好的交互性，與品牌“不斷嘗試新材料、新設(shè)計(jì)”的精神不謀而合。

　　2.熱點(diǎn)：水平視差效果

　　Hot  Dot的視差效果略有不同，頁面滾動(dòng)方向?yàn)樗?。頁面水平滾動(dòng)方向從左到右，背景圖像不固定，更容易設(shè)計(jì)開發(fā)。

　　整個(gè)網(wǎng)站不僅適合桌面設(shè)備，對(duì)觸摸屏也很友好。也可以在iOS和Android平臺(tái)上有很好的瀏覽體驗(yàn)。水平視差滾動(dòng)也可以以響應(yīng)的方式適用于移動(dòng)終端。用戶甚至可以在移動(dòng)終端設(shè)備上將瀏覽方向從橫向切換到縱向，所有屏幕內(nèi)容都可以相應(yīng)調(diào)整。

　　3.省錢：簡單的視差滾動(dòng)主頁設(shè)計(jì)

　　這個(gè)銀行網(wǎng)站模板使用了一個(gè)懸浮的下拉菜單欄，帶有手動(dòng)控制的轉(zhuǎn)盤和長滾動(dòng)視差效果。整個(gè)模板的UI設(shè)計(jì)風(fēng)格簡單，非常適合自定義修改。同時(shí)，它還采用了響應(yīng)性設(shè)計(jì)，這意味著用戶可以在不同的平臺(tái)上享受瀏覽。4.戴夫加馬奇：幫助你理解視覺差異效應(yīng)

　　戴夫加馬奇的視差滾動(dòng)網(wǎng)頁演示是一個(gè)幫助每個(gè)人理解視差滾動(dòng)網(wǎng)站的例子。當(dāng)您訪問此網(wǎng)頁時(shí)，戴夫?qū)⑾蛭覀冋故舅性厥侨绾喂ぷ鞯?，視覺元素是如何淡入淡出的，圖層是如何固定的，以及如何在移動(dòng)設(shè)備上水平滾動(dòng)。很好。

　　在這個(gè)演示中，戴夫給了我們這些重要的提示：

　　您需要讓所有瀏覽器都能夠輕松顯示您網(wǎng)站的視覺效果。你要把重點(diǎn)放在視覺微分效果最重要的屬性上，包括比例、旋轉(zhuǎn)效果、不透明度的控制。

　　要學(xué)習(xí)如何設(shè)計(jì)頁面中的浮動(dòng)和固定元素，應(yīng)該在頁面中小心使用這些元素。

　　不要總是調(diào)整圖像大小，瀏覽器不能總是處理這些問題

　　5.美國宇航局前景：交互式視差設(shè)計(jì)

　　NASA前景網(wǎng)頁提供了很好的互動(dòng)體驗(yàn)，通過網(wǎng)頁呈現(xiàn)行星礦工的故事。全球大災(zāi)難發(fā)生后，NASA派他們?nèi)ふ疑⒙湓谔栂档娜祟愇矬w。

　　網(wǎng)站提供了簡單愉悅的互動(dòng)視差效果，音頻可以營造出適合場(chǎng)景的氛圍，非常有魅力。

　　6.你好周一：三維視差效果的創(chuàng)建

　　你好周一創(chuàng)造了分屏3D視差效果。設(shè)計(jì)師用屏幕的一邊顯示設(shè)計(jì)案例，屏幕的另一邊顯示相關(guān)的描述和細(xì)節(jié)。每個(gè)設(shè)計(jì)案例都有不同的視覺特征和獨(dú)特的體驗(yàn)。

　　整個(gè)網(wǎng)站設(shè)計(jì)使用了吸引人的過渡效果，有助于打造無縫的視覺流和清晰的布局。很多案例都采用了鮮艷的顏色和漂亮的畫面，大膽的布局讓整個(gè)布局看起來很有氣勢(shì)。

　　7.Bearideas:簡單直觀的視差效果

　　畢博迪斯是一個(gè)非?？岬木W(wǎng)站！它沒有使用高端的設(shè)計(jì)技巧，而是使用簡單的長滾動(dòng)視差效果和一些細(xì)微的過渡效果，營造出愉悅的交互體驗(yàn)。他們的設(shè)計(jì)團(tuán)隊(duì)使用卡片和大膽的顏色來創(chuàng)造層次和豐富的視覺效果。

　　8.沉浸式花園：沉浸式3D視覺差異效果

　　“我們真的很喜歡通過故事來引發(fā)人們的情緒?！?/p>

　　沉浸式花園，不使用3D技術(shù)，使用視差滾動(dòng)和旋轉(zhuǎn)來創(chuàng)建3D般的深度和沉浸式體驗(yàn)。即使界面很小，也能讓人感覺很直觀。這個(gè)網(wǎng)站會(huì)預(yù)載很多短片，然后作為一個(gè)訪問者，你可以靈活的控制它們的播放，暫停等等。

　　這個(gè)網(wǎng)站最有意思的一點(diǎn)就是它內(nèi)置的多功能光標(biāo)，可以用來以不同的速度播放，控制比例和大小。很有意思。

　　9.瓦萊爾：沉浸式設(shè)計(jì)

　　Valaire也使用視差效果來營造身臨其境的體驗(yàn)，但會(huì)更有規(guī)律。網(wǎng)站的設(shè)計(jì)者用視差滾動(dòng)來講故事，但網(wǎng)站不是簡單的垂直滾動(dòng)，讓頁面更加多變和豐富。

　　網(wǎng)頁上的視差效果很有意思，可以觸動(dòng)用戶的感受，創(chuàng)造獨(dú)特的體驗(yàn)。

　　10.Cyclemon:讓人欲罷不能的視差效果

　　嗯，Cyclemon雖然排在最后，但也不遜色于其他九頁。這個(gè)網(wǎng)站簡單呈現(xiàn)了自行車愛好者的夢(mèng)想。當(dāng)你向下滾動(dòng)網(wǎng)頁時(shí)，會(huì)有不同的環(huán)境和不同的自行車。會(huì)讓你好奇下一個(gè)場(chǎng)景會(huì)是什么，會(huì)出現(xiàn)什么樣的自行車，會(huì)讓你停不下來。