“ Parallax Scrolling”這個(gè)詞在2012年下半年的Web設(shè)計(jì)上越來(lái)越流行，一開(kāi)始并不知道他是什么東東，只是字面上譯為“視差滾動(dòng)”，但對(duì)于實(shí)質(zhì)上的東 西，了解的并不是太多。隨著2013年到來(lái)，國(guó)外很多專(zhuān)家預(yù)測(cè)“Parallax Scrolling”將會(huì)是2013年Web上的一個(gè)流行素。對(duì)于喜歡前沿的我來(lái)說(shuō)，我覺(jué)得我有必要深入的了解他了。只有緊跟時(shí)代的Web人員，才會(huì)讓你 充滿更多的新設(shè)計(jì)元素，新的設(shè)計(jì)理念，不至于那么容易淘汰。（至少我是這么想的(^_^)）。

?

度娘 告訴我，“Parallax Scrolling”是指多層背景以不同的速度移動(dòng)，形成立體的運(yùn)動(dòng)效果，帶來(lái)非常出色的視覺(jué)體驗(yàn)。近些年來(lái)，用戶對(duì)視覺(jué)體驗(yàn)的要求不斷提高，而設(shè)計(jì)師們 也開(kāi)始在網(wǎng)頁(yè)中加入各種特效元素以滿足用戶的需求。這也是“Parallax Scrolling”具有吸引力，讓很Web設(shè)計(jì)師親瞇的原因。而且現(xiàn)在很多網(wǎng)站已經(jīng)開(kāi)始在使用了，并且在今年將會(huì)更容易看到這樣的網(wǎng)站誕生。

?

視差滾動(dòng)效果簡(jiǎn)單點(diǎn)理解就是指用戶讓通過(guò)鼠標(biāo)實(shí)現(xiàn)網(wǎng)頁(yè)多層背景以不同的速度移動(dòng)，從而形成立體的運(yùn)動(dòng)效果，帶來(lái)非常出色的視覺(jué)和交互體驗(yàn)。這種特效最早是驚現(xiàn)在Nike 2011年的 Nike Better World 項(xiàng)目里，時(shí)至今日，這種視差滾動(dòng)效果被越來(lái)越多的國(guó)外網(wǎng)站所應(yīng)用，成為Web設(shè)計(jì)的熱點(diǎn)趨勢(shì)。這種網(wǎng)站通常通過(guò)鼠標(biāo)滾輪滾動(dòng)來(lái)實(shí)現(xiàn)，用超酷的視覺(jué)體驗(yàn)來(lái)取代枯燥的頁(yè)面滾動(dòng)，從而“吸引”用戶走向自己的目標(biāo)。

?

說(shuō)了這么多，我想大家最關(guān)心的還是如何實(shí)現(xiàn)這樣的效果？或者說(shuō)這樣的效果要怎么實(shí)現(xiàn)？這也是我很關(guān)心的問(wèn)題，那么從今天開(kāi)始，我們一起來(lái)觀注 “Parallax Scrolling”這個(gè)流行詞。首先今天整理了一些有關(guān)于制作“Parallax Scrolling”Web效果的一些插件，希望對(duì)大家有所幫助。

?

1. Stella.js

Stella.js能很容易幫助創(chuàng)建一個(gè)視差滾動(dòng)網(wǎng)站。他的文檔也非常的簡(jiǎn)單。先給你的網(wǎng)站添加數(shù)據(jù)，然后通過(guò)“stallar()”函數(shù)來(lái)調(diào)用。

demo??? download

?

2. Super Scrollorama

Super Scrollorama很牛的一個(gè)插件，鼠標(biāo)滾動(dòng)來(lái)控制Web元素顯示或隱藏。

demo?? download

?

3. jQuery Scroll Path

沒(méi)有垂直滾動(dòng)，通過(guò)jQuery scroll path插件，你可以定義很多路徑，來(lái)實(shí)現(xiàn)滾動(dòng)效果。

demo??? download

?

4. Curtain.js

這個(gè)插件充許你使用多個(gè)固定面板來(lái)創(chuàng)建一個(gè)頁(yè)面，而且這些面板可以實(shí)現(xiàn)類(lèi)似于卷簾的效果。

demo??? download

?

5. Plax

Plax插件可以通過(guò)鼠標(biāo)的懸浮或移動(dòng)來(lái)觸發(fā)視差滾動(dòng)效果。

demo?? download

?

6. Scrolldeck

相當(dāng)簡(jiǎn)單的一個(gè)插件，以每個(gè)div作為一個(gè)幻燈片，用來(lái)制作視差滾動(dòng)效果。

demo???? download

?

7. jParallax

jParallax通過(guò)鼠標(biāo)移動(dòng)來(lái)控制節(jié)點(diǎn)的定位層，實(shí)現(xiàn)移動(dòng)的視差效果。

demo??? download

?

8. Spritely

Spritely是一個(gè)輕量級(jí)插件，通過(guò)簡(jiǎn)單的方法制作動(dòng)畫(huà)的sprites和動(dòng)態(tài)滾動(dòng)背景圖，從而達(dá)到視差效果。

demo??? download

?

9. Scrolling Parallax

Scrolling Parallax是一款通過(guò)滾動(dòng)條或鼠標(biāo)移動(dòng)來(lái)實(shí)現(xiàn)視差效果的jQuery插件。它充許一張背景圖片以不同的速度來(lái)移動(dòng)，從而實(shí)現(xiàn)視差滾動(dòng)效果。

demo???? download

?

10. jQuery Waypoints

Waypoints是一個(gè)簡(jiǎn)單的jQuery插件，通過(guò)一個(gè)簡(jiǎn)單的函數(shù)就能實(shí)現(xiàn)視差滾動(dòng)效果。

demo???? download

?

上面是為大家搜集整理的有關(guān)于“視差滾動(dòng)”的插件，希望這些插件能給你平時(shí)工作帶來(lái)便利，我們也會(huì)在后面整理出更多有關(guān)于這方面的資料，比如說(shuō) step by step的教程，在線案例欣賞，優(yōu)秀外文翻譯等，希望后面的資料和教程能幫你更深一層的了解這個(gè)“視差滾動(dòng)”，當(dāng)然關(guān)鍵還是需要大家動(dòng)手一試，不要感到害 怕，要始終相信自己，你是最棒的。如果大家有這方面相關(guān)的資源，煩請(qǐng)?jiān)谠u(píng)論中跟貼，與大家共享。

?

如需轉(zhuǎn)載，煩請(qǐng)注明出處： http://www.w3cplus.com/source/10-best-Parallax-Scrolling-plugin.html