視差效應(yīng)比較：要考慮的5種選擇

視差效果仍然是最熱門的網(wǎng)頁設(shè)計(jì)趨勢(shì)之一。當(dāng)用戶滾動(dòng)時(shí)背景和前景以不同的速度移動(dòng)以便有兩個(gè)獨(dú)立的層同時(shí)移動(dòng)時(shí)，會(huì)發(fā)生這種動(dòng)畫滾動(dòng)技術(shù)。
此效果可用于任意數(shù)量的網(wǎng)站類型，是創(chuàng)建和增加用戶參與度的有趣方式。視差效果的好處在于您不必在設(shè)計(jì)的每個(gè)頁面上使用它們; 視差滾動(dòng)是一種很棒的主頁技術(shù)，可以幫助用戶激活號(hào)召性用語或其他內(nèi)容。
視差效果創(chuàng)造了深度和距離的元素，并且比其他技術(shù)具有更大的三維感，使用戶感覺像是設(shè)計(jì)的一部分。
視差效應(yīng)的缺點(diǎn)是它們并不總是適用于移動(dòng)設(shè)備。（但是在本文末尾的教程中也有一些解決方法。）
這里有五種視差效果和風(fēng)格需要考慮。（確保單擊鏈接以查看每個(gè)動(dòng)畫的確切工作方式。）
1.展示變化的動(dòng)畫
使用視差效果顯示項(xiàng)目中的更改。運(yùn)動(dòng)層可以傳達(dá)時(shí)間，空間或位置的距離。
視差效果最好地展示了當(dāng)他們使用網(wǎng)站內(nèi)容時(shí)的變化。
上面的保時(shí)捷演變顯示了隨著時(shí)間的變化，每張圖像前景中的背景和汽車都發(fā)生了變化。（將聲音調(diào)高，音樂也會(huì)改變十年。）
該設(shè)計(jì)讓用戶滾動(dòng)，因?yàn)槟阆肟纯聪乱惠v車的樣子。這種技術(shù)可以按時(shí)間順序（如此處所示）或反向時(shí)間順序工作。讓它發(fā)揮作用的一個(gè)關(guān)鍵是這個(gè)網(wǎng)站在兩個(gè)方向都有效 - 即使是音樂也會(huì)回來 - 如果你向上滾動(dòng)而不是向下滾動(dòng)。
Sonance使用視差來展示另一種變化 - 整個(gè)設(shè)計(jì)中的位置變化。視差效果是網(wǎng)站整體導(dǎo)航模式的一部分，并且提示用戶在整個(gè)體驗(yàn)中的設(shè)計(jì)（位置）位置。
2.鼓勵(lì)滾動(dòng)
視差效果可以幫助創(chuàng)建參與度的原因是因?yàn)樗鼈児膭?lì)滾動(dòng)以使用戶在更長(zhǎng)的時(shí)間段內(nèi)與設(shè)計(jì)交互。
許多具有視差效果的設(shè)計(jì)包括主頁上的“滾動(dòng)”指令或提示，以幫助從一開始就鼓勵(lì)這種交互。（The Walking Dead Zombiefied的主頁在上面的特色圖片之前的頁面上包含此說明。）
“行尸走肉”網(wǎng)站通過視差來做一些有點(diǎn)不同的事情來鼓勵(lì)互動(dòng) - 當(dāng)角色穿過不同的漫畫風(fēng)格的面板時(shí)，滾動(dòng)會(huì)將用戶帶到屏幕上 - 而不是上下移動(dòng)。
3.運(yùn)動(dòng)和顏色
使用視差滾動(dòng)最有趣的方法之一是將顏色合并到不同的內(nèi)容“面板”中以展示元素或項(xiàng)目組合項(xiàng)目。顏色變化和動(dòng)畫可以表示新的東西。
顏色也是一個(gè)引人注目的設(shè)計(jì)工具，可以幫助吸引用戶。
上面的Werkstatt使用了一個(gè)白色和灰色的起始輪廓，在元素和文本之間有視差層。但是，額外的懸停動(dòng)作會(huì)使每個(gè)項(xiàng)目都變得生動(dòng)有色。效果組合效果很好，因?yàn)樵O(shè)計(jì)的其余部分很簡(jiǎn)單，它鼓勵(lì)用戶與每個(gè)單獨(dú)的元素進(jìn)行交互。
Lois Jeans采用另一種使用顏色的視差方法。每種新顏色都突出了服裝系列的不同部分 - 購(gòu)物者可以在不同的自然環(huán)境中看到牛仔褲，包括火，空氣，水和泥土。
4.使信息更容易消化
視差效果可以幫助使復(fù)雜的信息或繁重的文本塊更小，更易讀，更容易消化。當(dāng)你考慮移動(dòng)類型時(shí)，這是一個(gè)有趣的概念，但實(shí)際的實(shí)踐涉及移動(dòng)容納類型的容器。
上面的例子顯示了這個(gè)概念的兩個(gè)不同的應(yīng)用。
Melanie David在她的屏幕上有一個(gè)很長(zhǎng)的介紹。顯示導(dǎo)航元素 - 左側(cè)的左側(cè)不會(huì)移動(dòng)，而用戶可以滾動(dòng)右側(cè)的文本。當(dāng)文本塊結(jié)束頁面的兩側(cè)移動(dòng)到下一部分。對(duì)于比可視內(nèi)容區(qū)域更長(zhǎng)的文本塊，它是一個(gè)很好的解決方案。
Le Duc餐廳根據(jù)您閱讀和訂購(gòu)食品的方式，根據(jù)菜單的不同部分使用單獨(dú)的區(qū)塊。動(dòng)畫很簡(jiǎn)單，有趣的魚背景 - 告訴用戶有關(guān)餐廳的一些信息 - 并使菜單易于消化。
5.可視化“數(shù)字”現(xiàn)實(shí)
視差效果的大用途之一是幫助用戶想象他們無法看到的東西。更多設(shè)計(jì)使用三維和視差動(dòng)畫的組合來創(chuàng)建更逼真的體驗(yàn)。
這些3D設(shè)計(jì)往往屬于更卡通風(fēng)格的體驗(yàn)，例如上面的Madwell，但當(dāng)設(shè)計(jì)與特定類型的設(shè)備一起使用時(shí)，也可以具有更多VR感覺。
使用視差效果的網(wǎng)站的一個(gè)典型例子是西雅圖太空針?biāo)W(wǎng)站。它使用向上滾動(dòng)技術(shù)來模擬騎行到地標(biāo)頂部的樣子。
視差滾動(dòng)通過一些號(hào)召性用語消息和一個(gè)顯示位置有多高的導(dǎo)航欄，將天際線移動(dòng)到建筑物內(nèi)部。該設(shè)計(jì)具有教育性，冒險(xiǎn)性，并向用戶展示了沒有動(dòng)畫效果的難以想象的東西。
3個(gè)極好的視差資源
準(zhǔn)備為您的下一個(gè)項(xiàng)目創(chuàng)建視差效果？這些教程和代碼片段將幫助您為您的設(shè)計(jì)添加動(dòng)畫效果，可以幫助吸引用戶并讓他們更長(zhǎng)時(shí)間的參與。
如何創(chuàng)建視差滾動(dòng)效果：w3schools教程將指導(dǎo)您創(chuàng)建移動(dòng)容器效果，并提供使用媒體查詢?cè)谝苿?dòng)設(shè)備上獲得類似效果的方法。
視差滾動(dòng)網(wǎng)站演示：通過簡(jiǎn)單的演示和解釋，確切了解這種技術(shù)的工作原理。
15來自CodePen的迷人視差效果：該列表展示了一些偉大的視差筆，可以快速啟動(dòng)您的創(chuàng)造力，您可以與每個(gè)人一起玩。

結(jié)論

雖然視差效果既時(shí)髦又有趣，但它們并非適用于所有項(xiàng)目。同樣重要的是要考慮某些設(shè)備上的某些受眾可能難以瀏覽包含大量動(dòng)畫的網(wǎng)站。
在添加視差效果之前，請(qǐng)清點(diǎn)您的用戶及其偏好。從一個(gè)位置（例如主頁）開始小視差，并跟蹤分析以查看它是否適合您（在現(xiàn)場(chǎng)增加時(shí)間，它是一個(gè)有效的線索）。

在處理內(nèi)容和消息時(shí)使用視差。這種時(shí)髦的技術(shù)應(yīng)該是設(shè)計(jì)和互動(dòng)的樂趣。

本文來自創(chuàng)新互聯(lián)品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)
標(biāo)簽：公司網(wǎng)站制作，成都建設(shè)網(wǎng)站，官網(wǎng)建設(shè)，網(wǎng)頁制作公司，建網(wǎng)站公司，企業(yè)建站，重慶網(wǎng)站建設(shè)公司，成都網(wǎng)頁設(shè)計(jì)公司，成都網(wǎng)站設(shè)計(jì)公司，企業(yè)網(wǎng)站建設(shè)

文章名稱：視差效應(yīng)比較：要考慮的5種選擇
網(wǎng)頁地址：http://www.bm7419.com/news41/163941.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、ChatGPT、全網(wǎng)營(yíng)銷推廣、品牌網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)