kissui.scrollanim页面滚动动画库插件

<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>