jQuery和CSS3炫酷滚动页面内容元素动画特效插件

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

可用参数

下面是该页面滚动元素动画特效插件的可用参数：