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

2024-04-27 15:01:22

字體：大中小

來源：轉載

供稿：網友

插件介紹：

　　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傾斜。