kissui.scrollanim是一款实用的纯JS和CSS3页面滚动动画库插件。通过该插件可以使元素进入浏览器视口的时候，展示指定的CSS3动画效果。
安装
可以通过bower来安装kissui.scrollanim插件。
bower install kissui.scrollanim
使用方法
在页面中引入scrollanim.css和scrollanim.js文件。
<link rel="stylesheet" href="css/scrollanim.css">
<script src="js/scrollanim.js"></script>
HTML结构
为你需要制作CSS3动画的元素添加data-kui-anim属性。例如：
<p data-kui-anim="fadeIn">Show this with fade-in</p>
动画事件
Scrollanim使用kissui.position来管理和跟踪元素。kissui.position支持下面的一些事件：
in：当元素进入视口时触发。out：当元素离开视口时触发。middle：当元素垂直居中时触发。center：当元素水平居中时触发。top：当元素位于页面顶部时触发。bottom：当元素位于页面底部时触发。left：当元素位于页面左侧时触发。right：当元素位于页面右侧时触发。
你可以通过data-kui-anim属性或者kissuiScrollAnim.add(element, event)来为一个元素绑定事件。例如：
kissuiScrollAnim.add(element, {
'in': 'fadeIn'
});
或者：
kissuiScrollAnim.add(element, {
'center middle': 'fadeIn'
});
或者：
kissuiScrollAnim.add(element, {
'center middle': 'fadeIn',
'out': 'fadeOut'
});
动画效果
Scrollanim中内置了Animate.css来提供各种CSS3动画效果。它支持的动画有：
bounceflashpulserubberBandshakeheadShakeswingtadawobblejellobounceInbounceInDownbounceInLeftbounceInRightbounceInUpbounceOutbounceOutDownbounceOutLeftbounceOutRightbounceOutUpfadeInfadeInDownfadeInDownBigfadeInLeftfadeInLeftBigfadeInRightfadeInRightBigfadeInUpfadeInUpBigfadeOutfadeOutDownfadeOutDownBigfadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBigfadeOutUpfadeOutUpBigflipInXflipInYflipOutXflipOutYlightSpeedInlightSpeedOutrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRighthingerollInrollOutzoomInzoomInDownzoomInLeftzoomInRightzoomInUpzoomOutzoomOutDownzoomOutLeftzoomOutRightzoomOutUpslideInDownslideInLeftslideInRightslideInUpslideOutDownslideOutLeftslideOutRightslideOutUp
kissui.scrollanim页面滚动动画插件的github地址为：https://github.com/usablica/kissui.scrollanim。
