Scrollanim是一款能够在页面滚动的时候，重复显示动画的库。

Scrollanim不依赖任何库。

Scrollanim的动画使用了CSS3中的transform， 所以它不支持IE10以下的浏览器。

Scrollanim使用了高版本的ECMAScript语法，在IE10以下的浏览器上可能不支持，导致出现错误。 所以，最好对浏览器名称和版本进行判断，然后动态加载这个库。IE10以下的浏览器就不要加载这个库了。

Scrollanim官网：http://scrollanim.kissui.io

Scrollanim在GitHub上的网址：https://github.com/usablica/kissui.scrollanim

通过bower下载：

bower install --save kissui.scrollanim

<link rel="stylesheet" href="/bower_components/kissui.scrollanim/build/scrollanim.min.css">
<script type="text/javascript" src="/bower_components/kissui.scrollanim/build/scrollanim.min.js"></script>
<!-- 当使用了data-kui-event属性的时候引入 -->
<script type="text/javascript" src="/bower_components/kissui.position/position.js"></script>

参考

在要动画的元素上加上data-kui-anim属性，其值为动画名称。Scrollanim内置了animate.css， 可以使用animate.css里的任何一种动画。

示例：

<div data-kui-anim="fadeIn">

这面的例子，虽然能触发动画，却是在页面加载完成后触发一次，也就是只显示一次动画。 如果像要根据事件进行再次触发，就需要使用data-kui-event属性了。

data-kui-event属性的取值是一个或者多个事件名称，每个事件用空格隔开。

下面是事件列表：

• in
  当元素出现在视口中的时候触发
• out
  当元素离开视口中的时候触发
• middle
  当元素垂直居中的时候触发
• center
  当元素水平居中的时候触发
• top
  当元素在页面顶部的时候触发
• bottom
  当元素在页面底部的时候触发
• left
  当元素在页面左边的时候触发
• right
  当元素在页面右边的时候触发

示例：

<div data-kui-anim="fadeIn" data-kui-event="in">
<div data-kui-anim="fadeIn" data-kui-event="in top">

要使用data-kui-event属性，需要引入position.js。

element是要动画的DOM元素。

options是参数，JSON格式。

options的key和value：

• attributePrefix
  属性前缀。默认是data-kui-，如果要改，必须是以data-开头。
• animAttribute
  默认是anim，与attributePrefix合起来就是data-kui-anim。
• eventAttribute
  默认是event，与attributePrefix合起来就是data-kui-event。
• defaultEvent
  当没有使用data-kui-event属性的时候，默认的触发事件。默认是in。
• triggerOnInit
  页面加载完成后是否就触发。默认是true。
• autoReset
  动画完成后，是否清除相关属性。默认是true。
• 事件名
  事件名可以多个，之间用空格隔开。值是事件对应的动画名称。

示例：

kissuiScrollAnim.add(document.getElementById('xx'), {
    'in': 'bounceIn'
});

kissuiScrollAnim.add(document.getElementById('xx'), {
    'center middle': 'bounceIn'
});

kissuiScrollAnim.add(document.getElementById('xx'), {
    'center middle': 'fadeIn',
    'out': 'fadeOut'
});

设置全局参数。与kissuiScrollAnim.add(element, options)中的参数相同。

示例：

kissuiScrollAnim.setOptions({
    'autoReset': false,
    'triggerOnInit': false
});