網(wǎng)頁(yè)特效設計之滾動(dòng)視差設計發(fā)布者：本站     時(shí)間：2022-01-13 10:01:40

作為未來(lái)網(wǎng)頁(yè)設計的熱點(diǎn)趨勢之一的“滾動(dòng)視差”在近年來(lái)被越來(lái)越多網(wǎng)站所采用，特殊新穎的展示模式也讓許多用戶(hù)眼前一亮。網(wǎng)絡(luò )上也如雨后春筍一般出 現了很多像《30個(gè)讓人興奮的視差滾動(dòng)網(wǎng)站》、《60個(gè)視差滾動(dòng)網(wǎng)站賞析》……等一系列的視差滾動(dòng)的文章，不過(guò)賞析的居多，真正指導設計師如何去設計，如 何去實(shí)現的實(shí)用型文章卻很少。于是萌發(fā)了自己寫(xiě)一篇的想法，與感興趣的人共同交流下滾動(dòng)視察設計時(shí)的一些心得。

什么是滾動(dòng)視差?

視差滾動(dòng)(Parallax Scrolling)是指讓多層背景以不同的速度移動(dòng)，形成立體的運動(dòng)效果，帶來(lái)非常出色的視覺(jué)體驗。

視差效果，原本是一個(gè)天文學(xué)術(shù)語(yǔ)，當我們觀(guān)察星空時(shí)，離我們遠的星星移動(dòng)速度較慢，離我們近的星星移動(dòng)速度則較快。當我們坐在車(chē)上向車(chē)窗外 看時(shí)，也會(huì )有這樣的感覺(jué)，遠處的群山似乎沒(méi)有在動(dòng)，而近處的稻田卻在飛速掠過(guò)。許多游戲中都使用視差效果來(lái)增加場(chǎng)景的立體感。說(shuō)的簡(jiǎn)單點(diǎn)就是網(wǎng)頁(yè)內的元素 在滾動(dòng)屏幕時(shí)發(fā)生的位置的變化，然而各個(gè)不同的元素位置變化的速度不同，導致網(wǎng)頁(yè)內的元素有層次錯落的錯覺(jué)，這和我們人體的眼球效果很像。我看到多家產(chǎn)品 商用視差滾動(dòng)效果來(lái)展示產(chǎn)品，從不同的空間角度和用戶(hù)體驗，起到了非常不錯的效果。

看似復雜其實(shí)這個(gè)早就不是什么新鮮事兒，這種設計思路早在80年代的小霸王學(xué)習機上就見(jiàn)過(guò)。

網(wǎng)頁(yè)<a href=/photoshop/texiao/ target=_blank class=infotextkey>特效</a>設計之滾動(dòng)視差設計指南,PS教程,

在這個(gè)畫(huà)面里通過(guò)人物馬里奧、前景、背景著(zhù)三個(gè)部分的移動(dòng)速率的不同來(lái)實(shí)現立體效果。類(lèi)比網(wǎng)頁(yè)也是如此。一個(gè)滾動(dòng)視察的網(wǎng)站至少會(huì )有以下幾層 ：背景層，內容層，貼圖層。

背景層的滾動(dòng)(最慢)

貼圖層(內容層和背景層之間的元素)的滾動(dòng)(次慢); 按照現實(shí)生活的經(jīng)驗，越遠的景物移動(dòng)越慢。

內容層的滾動(dòng)(可以和頁(yè)面的滾動(dòng)速度一致) 。

我們讓三個(gè)圖層的滾動(dòng)速度不一致，就做出了簡(jiǎn)單的差異滾動(dòng)效果。

當然這只是實(shí)現了簡(jiǎn)單的滾動(dòng)視差效果，距離一個(gè)好的滾動(dòng)視察網(wǎng)站還不夠。