jquery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件。该内容元素动画插件在页面滚动到指定位置时，该位置的HTML元素会执行指定的CSS3动画特效，如旋转、翻转、放大缩小等动画特效。使用Smoove页面滚动元素动画特效插件可以很轻松的制作出各种华丽的CSS3动画效果。
安装
可以使用CDN从cdnjs引入或Bower来安装jquery-smoove插件。
$ bower install jquery-smoove
或者简单的添加jquery-smoove到你的项目的bower.json文件中。
"dependencies": {
"jquery-smoove": "latest"
}
使用方法
jquery-smoove的基本用法如下：
$('.foo').smoove(options);
上面的代码会在class为foo的元素上使用默认参数初始化 jQuery Smoove。你可以通过data-attributes属性来覆盖插件的默认参数，例如下面的例子：
// Attach Smoove to elements and set default options
$(".foo, .bar").smoove({
offset : '15%',
// moveX is overridden to -200px for ".bar" object
moveX : '100px',
moveY : '100px',
});
注意：在使用 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倾斜。
