17+jQuery页面滚动动画特效插件

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