- 相關(guān)推薦
網(wǎng)頁(yè)設(shè)計(jì)技巧:視差滾動(dòng)效果
大家小時(shí)候是否玩過(guò)紅白機(jī)或小霸王上面的游戲?就跟隨百分網(wǎng)小編一起去了解下吧，想了解更多相關(guān)信息請(qǐng)持續(xù)關(guān)注我們應(yīng)屆畢業(yè)生考試網(wǎng)!
這些游戲基本上都是通過(guò)前景與背景在場(chǎng)景移動(dòng)時(shí)產(chǎn)生不同的視差，從而達(dá)到簡(jiǎn)單的立體效果
所以說(shuō)視差滾動(dòng)不是啥新鮮事兒，我們小時(shí)候就玩過(guò)了……
目前這種視差滾動(dòng)效果被越來(lái)越多的國(guó)外網(wǎng)站所應(yīng)用， 成為網(wǎng)頁(yè)設(shè)計(jì)的熱點(diǎn)趨勢(shì)
給它以重新定義
不過(guò)這類效果的使用也需要看具體環(huán)境和最終頁(yè)面出來(lái)的整體性能，防止頁(yè)面過(guò)于拖沓。 其次，設(shè)計(jì)上要有非常嚴(yán)密的關(guān)聯(lián) 視差滾動(dòng)效果的主要特點(diǎn)： 1、直觀的設(shè)計(jì)，快速的響應(yīng)速度，更合適運(yùn)用于單頁(yè)面
2、差異滾動(dòng) 分層視差
頁(yè)面上很多的元素在相互獨(dú)立地滾動(dòng)著，如果我們來(lái)對(duì)其它分層的話，可以有兩到三層 ：背景層，內(nèi)容層，貼圖層 (是否可以讓它更多呢?有沒(méi)有辦法在視覺(jué)上做到?) 差異滾動(dòng)的實(shí)現(xiàn)規(guī)則： 背景層的滾動(dòng)(最慢) 貼圖層(內(nèi)容層和背景層之間的元素)的滾動(dòng)(次慢) 內(nèi)容層的滾動(dòng)(可以和頁(yè)面的滾動(dòng)速度一致) 我們讓三個(gè)圖層的滾動(dòng)速度不一致，就做出了漂亮的差異滾動(dòng)效果 作為設(shè)計(jì)師，你可以………
1、運(yùn)用大背景
這些背景圖像一般是高分辨率，大圖，覆蓋整個(gè)網(wǎng)站。 高清照片是一個(gè)迅速抓住觀眾的好方式，可以產(chǎn)生極具沖擊力的視覺(jué)效果,用戶的視線會(huì)不自覺(jué)地落在寬大的背景上 注意： 1. 1、背景圖的色彩、內(nèi)容在選擇時(shí)要十分講究，前提是不要破壞用戶的體驗(yàn)，不然再漂亮的照片也是枉然。 圖片類型最好選取趨向于一些比較柔和、略帶透明的一類，不要影響到網(wǎng)站主體內(nèi)容的閱讀，識(shí)別，講究協(xié)調(diào)。 1.2、以大量圖片為特色的頁(yè)面應(yīng)該考慮圖像的預(yù)加載問(wèn)題，以便為用戶提供更好更流暢的視覺(jué)體驗(yàn).
2、你也可以用簡(jiǎn)單的配色方案
沒(méi)有比純色的背景更直觀更簡(jiǎn)潔。純色可以有很多種表達(dá)方式 一個(gè)視差區(qū)間內(nèi)顏色最好保持使用2到3種，我們可以調(diào)整顏色的透明度，來(lái)達(dá)到各種視覺(jué)效果
3、定位好背景層，貼圖層和內(nèi)容層之間的關(guān)系
根據(jù)頁(yè)面自身的功能來(lái)定義是否需要貼圖層 貼圖層的存在是為了更有效的傳達(dá)視覺(jué)效果，但如果它成為了干擾，就會(huì)違背了我們使用的初衷
【網(wǎng)頁(yè)設(shè)計(jì)技巧:視差滾動(dòng)效果】相關(guān)文章：
長(zhǎng)滾動(dòng)網(wǎng)頁(yè)設(shè)計(jì)技巧03-08
網(wǎng)頁(yè)設(shè)計(jì)中的滾動(dòng)交互新技巧07-10
使用CSS3來(lái)實(shí)現(xiàn)滾動(dòng)視差效果的教程04-03
長(zhǎng)滾動(dòng)網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)技巧01-16
網(wǎng)頁(yè)設(shè)計(jì)的設(shè)計(jì)技巧03-06
網(wǎng)頁(yè)設(shè)計(jì)的技巧02-17
網(wǎng)頁(yè)設(shè)計(jì)技巧06-02