jQuery特效:Parallax Scrolling 視差滾動

Astral WebBy Astral Web 3 years agoNo Comments
首頁  /  網站設計與開發  /  jQuery特效:Parallax Scrolling 視差滾動

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/

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。