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>

原文链接:http://www.jqhtml.com/6737.html

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

SVG - 动画制作

SVG - 动画制作 HTML5学堂:SVG - 动画制作。上一篇文章讲解了SVG的基本属性,大家能够利用SVG的基本属性进行绘制图像,那么如何让绘制好的图像动...

601100
来自专栏web前端-

JQ事件和事件对象

  //mouseover()/mouseout()和mouseenter()/mouseleave()的区别

30320
来自专栏WebDeveloper

这种div高度自适应确定你知道吗?

14920
来自专栏河湾欢儿的专栏

表单

form 表单 <input type="…… " name="" value="" /> text 文本框 passwor...

10220
来自专栏菜鸟计划

CSS布局(五) 网页布局方式

网页实质是块与块之间的位置,块挨着块,块嵌套块,块叠着块。 三种关系:相邻,嵌套,重叠。 下面介绍网页布局的常用几种方式 ? 1.一列布局: 一般都是固定的宽高...

40660
来自专栏游戏杂谈

CCLabelAtlas的宽度为奇数时的显示bug

遇到一个很郁闷的bug,CCLabelAtlas设置文字内容在ipad上和android上正常,就只有iphone怎么显示都不正常。后来把它宽度 + 1,然后就...

12910
来自专栏DeveWork

WordPress 编辑器快捷键——让写作来得更方便些吧!

偶然在网络上看到的,所以转载在本站DeveWork.com 。这个是默认编辑器的快捷键,也很好记,有了这个,就能更加方便进行写作了。据说现在Markdown 语...

30450
来自专栏前端儿

图片轮播(左右切换)--JS原生和jQuery实现

左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分

1.2K20
来自专栏腾讯NEXT学位

CSS布局解决方案(上)

31540
来自专栏菜鸟前端工程师

html+css学习笔记006-伪类

15120

扫码关注云+社区

领取腾讯云代金券