<h2>簡介</h2>
kissui.scrollanim是一款實用的純JS和CSS3頁面滾動動畫庫插件。通過該插件可以使元素進入瀏覽器視口的時候，展示指定的CSS3動畫效果。
<h2>下載地址及演示</h2>
<a href="http://www.jqhtml.com//wp-content/uploads/2017/05/wz/kissui.scrollanim/" target="_blank">在線演示</a>
<a href="https://www.jqhtml.com/6737.html" target="_blank">在線下載</a>
<h2>安裝</h2>
可以通過bower來安裝kissui.scrollanim插件。
bower install kissui.scrollanim
<h2>使用方法</h2>
在頁面中引入scrollanim.css和scrollanim.js文件。
<link rel="stylesheet" href="css/scrollanim.css"> <script src="js/scrollanim.js"></script>
<strong>HTML結構</strong>
爲你需要製作CSS3動畫的元素添加<code>data-kui-anim</code>屬性。例如：
<p data-kui-anim="fadeIn">Show this with fade-in</p>
<strong>動畫事件</strong>
Scrollanim使用<code>kissui.position</code>來管理和跟蹤元素。<code>kissui.position</code>支持下面的一些事件：
<ul>
<li><code>in</code>：當元素進入視口時觸發。
<li><code>out</code>：當元素離開視口時觸發。
<li><code>middle</code>：當元素垂直居中時觸發。
<li><code>center</code>：當元素水平居中時觸發。
<li><code>top</code>：當元素位於頁面頂部時觸發。
<li><code>bottom</code>：當元素位於頁面底部時觸發。
<li><code>left</code>：當元素位於頁面左側時觸發。
<li><code>right</code>：當元素位於頁面右側時觸發。
</ul>
你可以通過<code>data-kui-anim</code>屬性或者<code>kissuiScrollAnim.add(element, event)</code>來爲一個元素綁定事件。例如：
kissuiScrollAnim.add(element, {
'in': 'fadeIn'
}); 或者：
kissuiScrollAnim.add(element, {
'center middle': 'fadeIn'
}); 或者：
kissuiScrollAnim.add(element, {
'center middle': 'fadeIn',
'out': 'fadeOut'
}); <strong>動畫效果</strong>
Scrollanim中內置了<code>Animate.css</code>來提供各種<code>CSS3</code>動畫效果。它支持的動畫有：
<code> bounce </code>
<code> flash </code>
<code> pulse </code>
<code> rubberBand </code>
<code> shake </code>
<code> headShake </code>
<code> swing </code>
<code> tada </code>
<code> wobble </code>
<code> jello </code>
<code> bounceIn </code>
<code> bounceInDown </code>
<code> bounceInLeft </code>
<code> bounceInRight </code>
<code> bounceInUp </code>
<code> bounceOut </code>
<code> bounceOutDown </code>
<code> bounceOutLeft </code>
<code> bounceOutRight </code>
<code> bounceOutUp </code>
<code> fadeIn </code>
<code> fadeInDown </code>
<code> fadeInDownBig </code>
<code> fadeInLeft </code>
<code> fadeInLeftBig </code>
<code> fadeInRight </code>
<code> fadeInRightBig </code>
<code> fadeInUp </code>
<code> fadeInUpBig </code>
<code> fadeOut </code>
<code> fadeOutDown </code>
<code> fadeOutDownBig </code>
<code> fadeOutLeft </code>
<code> fadeOutLeftBig </code>
<code> fadeOutRight </code>
<code> fadeOutRightBig </code>
<code> fadeOutUp </code>
<code> fadeOutUpBig </code>
<code> flipInX </code>
<code> flipInY </code>
<code> flipOutX </code>
<code> flipOutY </code>
<code> lightSpeedIn </code>
<code> lightSpeedOut </code>
<code> rotateIn </code>
<code> rotateInDownLeft </code>
<code> rotateInDownRight </code>
<code> rotateInUpLeft </code>
<code> rotateInUpRight </code>
<code> rotateOut </code>
<code> rotateOutDownLeft </code>
<code> rotateOutDownRight </code>
<code> rotateOutUpLeft </code>
<code> rotateOutUpRight </code>
<code> hinge </code>
<code> rollIn </code>
<code> rollOut </code>
<code> zoomIn </code>
<code> zoomInDown </code>
<code> zoomInLeft </code>
<code> zoomInRight </code>
<code> zoomInUp </code>
<code> zoomOut </code>
<code> zoomOutDown </code>
<code> zoomOutLeft </code>
<code> zoomOutRight </code>
<code> zoomOutUp </code>
<code> slideInDown </code>
<code> slideInLeft </code>
<code> slideInRight </code>
<code> slideInUp </code>
<code> slideOutDown </code>
<code> slideOutLeft </code>
<code> slideOutRight </code>
<code> slideOutUp </code>