jQuery.smoove — jQuery和CSS3炫酷滾動頁面內容元素動畫特效插件

插件介紹：

　　jQuery-smoove是一款jQuery和CSS3炫酷滾動頁面內容元素動畫特效插件。該內容元素動畫插件在頁面滾動到指定位置時，該位置的HTML元素會執行指定的CSS3動畫特效，如旋轉、翻轉、放大縮小等動畫特效。使用Smoove頁面滾動元素動畫特效插件可以很輕松的制作出各種華麗的CSS3動畫效果。

 

基本用法

$('.smoove').smoove(options);

上面的代碼會在class為 smoove 的元素上使用默認參數初始化 jQuery Smoove。

你可以通過data-attributes屬性來覆蓋插件的默認參數，例如下面的例子：

<div class="foo"></div>
<div class="bar" data-move-x="-200px" data></div>
 
<script src“/jquery/jquery.min.js"></script>
<script src="/libs/jquery.smoove.min.js"></script>               
<script>
  // 覆蓋smoove的默認參數
  $(".foo, .bar").smoove({
    offset  : '15%',
    // moveX is 覆蓋 ".bar" 的 -200px 
    moveX   : '100px',
    moveY   : '100px',
  });
</script> 

注意：在使用 data-attributes 屬性時，要將屬性的駝峰格式改為連字符格式，例如：moveX要改為data-move-x

 

可選參數：

名稱	類型	默認值	描述
offset	integer or string	150	當對象滑動進入屏幕之前距離屏幕底部的距離，例如：10%。
opacity	integer (0-100)	0	當對象滑動進入屏幕之前的透明度。
perspective	integer	1000	對象的3D perspective，單位像素。
transformOrigin	string	50% 50%	對象transform的Origin,單位像素、百分比或默認關鍵字(left, right, top or bottom)
skewY	angle	none	沿Y軸的2D傾斜度。
move	string	none	沿X軸和Y軸2D移動的距離，例如：100px,50%。
move3d	string	none	沿X軸、Y軸和Z軸3D移動的距離，例如：10px,10px,10px。
moveX	string	none	沿X軸移動對象，例如：10px or 10%
moveY	string	none	沿Y軸移動對象，例如：10px or 10%
moveZ	string	none	沿Z軸移動對象，例如：10px or 10%
rotate	string	none	2D旋轉，例如：90deg
rotate3d	string	none	沿X軸、Y軸和Z軸的3D旋轉，例如：1,1,1,90deg
rotateX	string	none	沿X軸的3D旋轉，例如：90deg
rotateY	string	none	沿Y軸的3D旋轉，例如：90deg
rotateZ	string	none	沿Z軸的3D旋轉，例如：90deg
scale	decimal or string	none	X軸和Y軸方向上的2D縮放 (x,y)，例如2.5或2,0.5
scale3d	string	none	沿X軸、Y軸和Z軸方向上的3D縮放 (x,y,z)，例如：2,3,0.5
scaleX	decimal	none	X軸方向上的縮放。
scaleY	decimal	none	Y軸方向上的縮放。
skew	angle	none	沿X軸和Y軸方向上的2D傾斜，例如：90deg,90deg
skewX	angle	none	沿X軸方向上的2D傾斜。
skewY	angle	none	沿Y軸方向上的2D傾斜。