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

結(jié)論

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

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

本文來自創(chuàng)新互聯(lián)品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計制作公司-創(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è)計公司，成都網(wǎng)站設(shè)計公司，企業(yè)網(wǎng)站建設(shè)

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

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

廣告

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