近些年來(lái)，用戶對(duì)視覺(jué)體驗(yàn)的要求不斷提高，而設(shè)計(jì)師們也開(kāi)始在網(wǎng)頁(yè)設(shè)計(jì)中加入各種特效元素以滿足用戶的需求。其中有一種特效的效果很具有吸引力，它就是視差滾動(dòng)效果。視差滾動(dòng)（Parallax Scrolling）是指讓多層背景以不同的速度移動(dòng)，形成立體的運(yùn)動(dòng)效果，可以帶來(lái)非常出色的視覺(jué)體驗(yàn)。
隨著這種炫酷的效果首次在Nike 2011年的 Nike Better World 項(xiàng)目中完美展現(xiàn)，如今這種視差滾動(dòng)效果被越來(lái)越多的國(guó)外網(wǎng)站所應(yīng)用，成為Web設(shè)計(jì)的熱點(diǎn)趨勢(shì)。因此，本文整理了十種關(guān)于此效果的教程和插件和大家分享，希望為你的網(wǎng)站設(shè)計(jì)提供一些靈感。
不過(guò)有兩個(gè)方面需要讀者注意：
- 以大量圖片為特色的網(wǎng)站應(yīng)該考慮圖像的預(yù)加載問(wèn)題，以便為用戶提供更好更流暢的視覺(jué)體驗(yàn)；
- 某些網(wǎng)站頁(yè)面在移動(dòng)設(shè)備上的效果可能較之在PC上有所不同，一些功能也可能無(wú)法正常使用。
一個(gè)超級(jí)棒的插件，為你的網(wǎng)站提供縱深和滑動(dòng)效果。
一份幫助你增加網(wǎng)頁(yè)立體層次感的教程。
3、Nike Better World場(chǎng)景的背后
一份為那些急切想重現(xiàn)NIKE網(wǎng)站滾動(dòng)效果的設(shè)計(jì)師準(zhǔn)備的教程。
4、用jQuery和CSS構(gòu)建一個(gè)具有視差滾動(dòng)效果的網(wǎng)站界面
一份為那些想在此領(lǐng)域了解的更深的設(shè)計(jì)師準(zhǔn)備的例子和教程。
5、用JQuery創(chuàng)建一個(gè)時(shí)尚的具有視差背景的效果
一份教程，在背景上幫你添加一些滾動(dòng)的云彩。
6、動(dòng)畫(huà)背景式的網(wǎng)頁(yè)頭部
用一個(gè)動(dòng)畫(huà)式的網(wǎng)頁(yè)頭部來(lái)讓你的訪問(wèn)者為你歡呼吧！
一份視差效果和內(nèi)容同時(shí)出現(xiàn)的有趣的教程。
一個(gè)通過(guò)重復(fù)和動(dòng)畫(huà)運(yùn)動(dòng)產(chǎn)生立體錯(cuò)覺(jué)的插件。
一個(gè)為任何滾動(dòng)元素提供視差滾動(dòng)效果的JQuery插件。
10、Curtain.js
允許你嵌入一個(gè)類似于幕布升起的效果到你的網(wǎng)頁(yè)中。
英文原文：10 Useful Tutorials And Plugins for creating Parallax and scrolling effects.
哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無(wú)需額外費(fèi)用，即可穩(wěn)步提升排名至首頁(yè)。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。