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

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

什么是滾動視差?

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

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

看似復雜其實這個早就不是什么新鮮事兒，這種設計思路早在80年代的小霸王學習機上就見過。

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

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

背景層的滾動(最慢)

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

內(nèi)容層的滾動(可以和頁面的滾動速度一致) 。

我們讓三個圖層的滾動速度不一致，就做出了簡單的差異滾動效果。

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