新聞資訊
我們不只做網(wǎng)站...
什么是滾動(dòng)視差?網(wǎng)站設(shè)計(jì)之視差滾動(dòng)特效
發(fā)表日期:2022-03-14 文章編輯:洛壹網(wǎng)絡(luò) 文章來源:深圳網(wǎng)站設(shè)計(jì)
作為未來網(wǎng)頁設(shè)計(jì)的熱點(diǎn)趨勢(shì)之一的“滾動(dòng)視差”在近年來被越來越多網(wǎng)站所采用,特殊新穎的展示模式也讓許多用戶眼前一亮。網(wǎng)絡(luò)上也如雨后春筍一般出 現(xiàn)了很多像《30個(gè)讓人興奮的視差滾動(dòng)網(wǎng)站》、《60個(gè)視差滾動(dòng)網(wǎng)站賞析》……等一系列的視差滾動(dòng)的文章,不過賞析的居多,真正指導(dǎo)設(shè)計(jì)師如何去設(shè)計(jì),如 何去實(shí)現(xiàn)的實(shí)用型文章卻很少。于是萌發(fā)了自己寫一篇的想法,與感興趣的人共同交流下滾動(dòng)視察設(shè)計(jì)時(shí)的一些心得。
什么是滾動(dòng)視差?
視差滾動(dòng)(Parallax Scrolling)是指讓多層背景以不同的速度移動(dòng),形成立體的運(yùn)動(dòng)效果,帶來非常出色的視覺體驗(yàn)。
視差效果,原本是一個(gè)天文學(xué)術(shù)語,當(dāng)我們觀察星空時(shí),離我們遠(yuǎn)的星星移動(dòng)速度較慢,離我們近的星星移動(dòng)速度則較快。當(dāng)我們坐在車上向車窗外 看時(shí),也會(huì)有這樣的感覺,遠(yuǎn)處的群山似乎沒有在動(dòng),而近處的稻田卻在飛速掠過。許多游戲中都使用視差效果來增加場(chǎng)景的立體感。說的簡(jiǎn)單點(diǎn)就是網(wǎng)頁內(nèi)的元素 在滾動(dòng)屏幕時(shí)發(fā)生的位置的變化,然而各個(gè)不同的元素位置變化的速度不同,導(dǎo)致網(wǎng)頁內(nèi)的元素有層次錯(cuò)落的錯(cuò)覺,這和我們?nèi)梭w的眼球效果很像。我看到多家產(chǎn)品 商用視差滾動(dòng)效果來展示產(chǎn)品,從不同的空間角度和用戶體驗(yàn),起到了非常不錯(cuò)的效果。
看似復(fù)雜其實(shí)這個(gè)早就不是什么新鮮事兒,這種設(shè)計(jì)思路早在80年代的小霸王學(xué)習(xí)機(jī)上就見過。
網(wǎng)頁特效設(shè)計(jì)之滾動(dòng)視差設(shè)計(jì)指南,PS教程,
在這個(gè)畫面里通過人物馬里奧、前景、背景著三個(gè)部分的移動(dòng)速率的不同來實(shí)現(xiàn)立體效果。類比網(wǎng)頁也是如此。一個(gè)滾動(dòng)視察的網(wǎng)站至少會(huì)有以下幾層 :背景層,內(nèi)容層,貼圖層。
背景層的滾動(dòng)(最慢)
貼圖層(內(nèi)容層和背景層之間的元素)的滾動(dòng)(次慢); 按照現(xiàn)實(shí)生活的經(jīng)驗(yàn),越遠(yuǎn)的景物移動(dòng)越慢。
內(nèi)容層的滾動(dòng)(可以和頁面的滾動(dòng)速度一致) 。
我們讓三個(gè)圖層的滾動(dòng)速度不一致,就做出了簡(jiǎn)單的差異滾動(dòng)效果。
當(dāng)然這只是實(shí)現(xiàn)了簡(jiǎn)單的滾動(dòng)視差效果,距離一個(gè)好的滾動(dòng)視察網(wǎng)站還不夠。
本文鏈接:http://www.snohomisheventcenter.com/news-details-86-660-1.html
版權(quán)聲明:
1:本站所有內(nèi)容均由互聯(lián)網(wǎng)收集整理、上傳,并且以計(jì)算機(jī)技術(shù)研究交流為目的,僅供大家參考、學(xué)習(xí),不存在任何商業(yè)目的與商業(yè)用途,如描述有誤或者學(xué)術(shù)不對(duì)之處歡迎及時(shí)提出,不甚感謝。
2、 如涉及版權(quán)問題,請(qǐng)聯(lián)系我們4724325@qq.com第一時(shí)間處理;
我們的服務(wù)
相關(guān)新聞
-
網(wǎng)頁設(shè)計(jì)中,網(wǎng)站交互影響的元素是什么
-
2021年網(wǎng)站設(shè)計(jì)的流行趨勢(shì)--上篇
-
網(wǎng)頁設(shè)計(jì)過程中如何合理的運(yùn)用圖標(biāo)呢?
-
網(wǎng)站設(shè)計(jì),簡(jiǎn)約風(fēng)格設(shè)計(jì)為什么越來越受...
-
建站的時(shí)候網(wǎng)頁設(shè)計(jì)如何做?
-
國際色彩趨勢(shì)權(quán)威機(jī)構(gòu)公布,2022的年度...
-
什么是情緒化設(shè)計(jì)?
-
深圳網(wǎng)站設(shè)計(jì)公司,網(wǎng)頁設(shè)計(jì)師需要具備...
-
如何設(shè)計(jì)一個(gè)網(wǎng)站使客戶擁有更豐富的體...
-
網(wǎng)站設(shè)計(jì)融合C4D的效果