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