专栏首页我的前端kissui.scrollanim页面滚动动画库插件

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 条评论
登录 后参与评论

相关文章

  • 如何用纯 CSS 创作一个小球上台阶的动画

    https://github.com/comehope/front-end-daily-challenges

    用户4006703
  • 使用UITableView 简化登录注册界面

    感觉有些时间没写iOS的东西了,主要是大神们都已经把该讲的都讲清楚了,<code>实在不敢弄斧班门</code>前段时间看到一篇巧用状态值处理复杂的 Table...

    代码行者
  • Nodejs Serialport文档翻译

    本文链接 想象一个世界,你可以在那写javascript来控制搅拌机,灯,安全系统或者甚至是机器人。是的,我说的是机器人。那个世界就是这儿,现在使用node ...

    治电小白菜
  • 自识别标记(self-identifying marker) -(5) 用于相机标定的CALTag图案设计

    前面介绍了CALTag的工作原理、应用领域。如果我们想在实际项目中应用自识别标记,通常需要根据项目的特点来设计不同尺寸,不同数目,不同排列的图案,那么如何设计属...

    用户1150922
  • iOS之DBL_EPSILON,FLT_EPSILON,FLT_MIN和FLT_MAX

    Dwyane
  • Swift3.1动画(一)

    Dwyane
  • iOS实用_可点击部分文字label

    Dwyane
  • 【iOS 开发】从 setNeedsLayout 说起

    本文从 <code>setNeedsLayout</code> 这个方法说起,分享与其相关的 UIKit 视图交互、使用场景等内容。

    KyXu
  • Mac OSX 给现有的应用追加基于文档的功能

    在Xcode中创建Cocoa Application 工程时,通常有两种选择类型:<code>基于文档的Application</code> 和<code>非文...

    代码行者
  • 【iOS 开发】SnapKit 是怎样炼成的

    这是对 Swift 布局框架 SnapKit 的源码的一点分析,尝试搞清,一个好的布局框架,背后都做了些什么。

    KyXu

扫码关注云+社区

领取腾讯云代金券