2012年9月22日 星期六

超酷的結合CSS3轉場jQuery plugin

225990_4502101160411_341625720_n

最近找到一個很酷的2D/3D相片CSS3轉場的jQuery plugin,使用後在網站放相片輪播就更炫了。

外掛網址
Flux-Slider

首先簡單的準備這樣的html
<div id="slider">
<img src="imgs/peacock.jpg" alt="" />
<img src="imgs/koi.jpg" alt="" />
<img src="imgs/life.jpg" alt="" />
</div>


然後像這樣初始化
  1. if(!flux.browser.supportsTransitions)   
  2. alert("Flux Slider requires a browser that supports CSS3 transitions");   
  3.   
  4. window.f = new flux.slider('#slider', {   
  5.     pagination: false,   
  6.     controls: false,   
  7.     transitions: ['explode''tiles3d''bars3d''cube''turn'],   
  8.     autoplay: false  
  9. });  

文件有介紹每個初始化的部分代表什麼,transitions的選項裡面有這個外掛有的轉場效果,可以選幾個喜歡的效果來用。

如果要用按鈕控制切換照片的話,可以參考以下的寫法。
  1. $('.transitions').click(function(event){   
  2.     event.preventDefault();   
  3.     window.f.next($(event.target).data('transition'), $(event.target).data('params'));   
  4. });  

這個很實用,分享給大家。

DEMO
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...