标签：
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倾斜。 |
jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件
标签：
原文地址：http://www.cnblogs.com/moretry/p/4807558.html
