前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >kissui.scrollanim页面滚动动画库插件

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

作者头像
用户4006703
修改2018-11-26 11:10:43
1.3K0
修改2018-11-26 11:10:43
举报
文章被收录于专栏:我的前端

<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插件。

代码语言:txt
复制
bower install kissui.scrollanim       

<h2>使用方法</h2>

在页面中引入scrollanim.css和scrollanim.js文件。

代码语言:txt
复制
<link rel="stylesheet" href="css/scrollanim.css">
<script src="js/scrollanim.js"></script>          

<strong>HTML结构</strong>

为你需要制作CSS3动画的元素添加<code>data-kui-anim</code>属性。例如:

代码语言:txt
复制
<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>来为一个元素绑定事件。例如:

代码语言:txt
复制
kissuiScrollAnim.add(element, {
  'in': 'fadeIn'
});    

或者:

代码语言:txt
复制
kissuiScrollAnim.add(element, {
  'center middle': 'fadeIn'
});   

或者:

代码语言:txt
复制
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>

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档