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