jquery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件。该内容元素动画插件在页面滚动到指定位置时，该位置的HTML元素会执行指定的CSS3动画特效，如旋转、翻转、放大缩小等动画特效。使用Smoove页面滚动元素动画特效插件可以很轻松的制作出各种华丽的CSS3动画效果。

安装

可以使用CDN从cdnjs引入或Bower来安装jquery-smoove插件。

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-smoove/0.2.6/jquery.smoove.min.js"></script>   
$ bower install jquery-smoove

或者简单的添加jquery-smoove到你的项目的bower.json文件中。

"dependencies": {
    "jquery-smoove": "latest"
}

使用方法

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>               
              
<script>
  // 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',
  });
</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倾斜。