jquery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件。该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转、翻转、放大缩小等动画特效。使用Smoove页面滚动元素动画特效插件可以很轻松的制作出各种华丽的CSS3动画效果。
使用方法
jquery-smoove的基本用法如下:
$( '.foo' ).smoove(options);
|
上面的代码会在class为foo 的元素上使用默认参数初始化 jQuery Smoove。你可以通过data-attributes 属性来覆盖插件的默认参数,例如下面的例子:
< div class = "foo" >div >
< div class = "bar" data-move-x = "-200px" data>div >
< script src = "//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js" >script >
< script src = "//cdnjs.cloudflare.com/ajax/libs/jquery-smoove/0.2.6/jquery.smoove.min.js" >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倾斜。 |
原文地址:http://www./jQuery/Layout-Interface/201503021448.html
|