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