jQuery特效:Parallax Scrolling 視差滾動

視差滾動(Parallax scrolling)是電腦圖學中一種特別的滑動特效技巧，原理是把背景圖片的移動速度放慢，讓前景圖片移動較快，藉由前後不同移動速度的圖片、讓2D畫面產生多層次的景深效果，藉此來模擬3D效果。早期的遊樂器畫面和2D動畫都可以看到這種效果。把視差滾動應用在網頁設計上，也有不錯的視覺效果。方法非常方便簡單，只要使用jQuery外掛搭配CSS設定就可以幫助我們快速製作出含有視差滾動效果的網頁了！

Scrolling Parallax jQuery Plugin 就是一套非常容易使用的 jQuery外掛。

Step 1:

引入jQuery及Scrolling Parallax jQuery Plugin

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.scrolling-parallax.js"></script>

 

Step 2:

指定一張背景圖片。

只要加上底下程式碼、就完成背景圖片及視差滾動的設定囉

$.scrollingParallax('img/parallax-background.jpg');

 

Scrolling Parallax jQuery Plugin 也可以指定元件做效果：

$('div.parallax').scrollingParallax();

上面程式碼就指定class為parallax的div做視差滾動。

Scrolling Parallax jQuery Plugin 還有許多選項可以設定，參考官網的說明及教學。官網左邊那隻打不死的蟑螂、就是 " loopIt : true" 的效果。

套件名稱：Scrolling Parallax jQuery Plugin

 

幾個使用視差滾動效果的網站：

http://www.iutopi.com/

http://www.culturalsolutions.co.uk/

http://www.iwc.com/en/collection/portofino/IW5101/

http://www.netlash-bseen.be/

http://www.guyvernes.com/

http://unfold.no/

http://www.manufacturedessai.it/it/

http://journey.lifeofpimovie.com/