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