skroll是一款页面滚动时触发元素动画效果的jQuery插件。skroll插件支持17+动画效果，可以在页面滚动时为任意DOM元素提供这些动画效果。

使用方法

在页面中引入jquery和skroll.min.js文件。

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/skroll.min.js"></script>
HTML

例如要为一个<div>元素添加动画效果。

<div class="box">Animation</div>
初始化插件

接着使用下面的js代码来初始化该插件。

new Skroll()
  .add(".element",{
    delay:50,
    duration:500,
    animation:"zoomIn"
  })
  .init();

如果要支持移动设备，可以添加 mobile:true。

new Skroll({
  mobile:true
})

配置参数

skroll.js插件可用的配置参数有：

triggerTop:.2,               // Any value between 0 and 1
triggerBottom:.8,            // Any value between 0 and 1
delay:0,                     // Integer, delay in milliseconds
duration:500,                // Integer, duration in milliseconds
animation:"zoomIn",          // string or object
easing:"ease",               // string
wait:0,                      //  integer, wait in milliseconds
repeat:false,                // boolean
onEnter:false,               // function or false to denote no action
onLeave:false                // function or false to denote no action

skroll.js插件支持的动画有：

  • zoomIn
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInDown
  • slideInLeft
  • slideInLeftBig
  • slideInRight
  • slideInRightBig
  • flipInX
  • flipInY
  • rotateRightIn
  • rotateLeftIn
  • growInLeft
  • growInRigh

skroll.js插件的github网址为：https://github.com/akzhy/skroll