用于管理硬件加速 CSS3 动画的 jQuery 插件 - animo.js

用于管理硬件加速 CSS3 动画的 jQuery 插件 - animo.js

版本:

浏览量:1128

最后更新:2021-09-07

应用标签:Jquery插件gitMAC 软件

推荐指数:

详细信息

animo.js 是一个令人惊叹的 jQuery 插件,它提供了一种简单的方法来管理具有特殊效果的硬件加速 CSS3 动画,例如堆栈动画、跨浏览器模糊、旋转、反弹、动画完成时的回调等。

也可以看看:

  • 用于硬件加速 CSS3 动画的 jQuery 插件 - Minimit Anima

  • 令人惊叹的 CSS 框架,用于使用 jQuery 的 CSS3 动画

基本用法:

1. 在您的网页上包含 jQuery 库 2.0+ 和 jQuery animo.js 脚本

<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="animo.js" type="text/javascript"></script>

2. 在您的网页上包含所需的 jQuery animo.js 样式表

<link href="animate+animo.css" rel="stylesheet" type="text/css">

3. 为 Tada 和 Bounce 动画创建 html

<div id="demo" style="height:100px;width:100px;background:#34495e"></div>
<button onclick="$('#demo2').animo({animation: ['tada', 'bounce'], duration: 2});">Tada and Bounce</button>

4. 设置

// <a href="https://www.jqueryscript.net/animation/">Animation</a>s
 
$(element).animo({
  // [string]/[array] class name(s) of the css animation,
  animation: "name", // or ["name1", "name2", "name3"]
  // [float] time (in seconds) for the animation to last during 1 iteration
  duration: 0.8,
  // [int] number of times the animation shall repeat itself
  iterate: 1,
  // [string] how the animation should progress over the duration of each cycle
  timing: "linear",
  // [boolean] whether or not to "cleanse" the element after the animation has completed
  keep: false
} [,function]);
 
// Blur
 
// Specifying options
$(element).animo("blur", {
  // [int] radius of the blur
  amount: 3,
  // [float] time (in seconds) from focus to blur
  duration: 0.6,
  // [float] time (in seconds) to automatically focus after blur
  focusAfter: 3.5,
} [,function]);
 
// Using defaults
$(element).animo("blur" [,function]);
 
// Rotate
 
// Specifying options
$(element).animo("rotate", {
  // [int] degrees from origin to rotate element
  degrees: 15,
  // [float] time (in seconds) to complete rotation
  duration: 0.6
} [,function]);
 
// Using defaults
$(element).animo("rotate" [,function]);
 
// Focus
 
// Removes blur effect on an element immediately
$(element).animo("focus");
 
// Cleanse
 
// Removes all references to animo effects
$(element).animo("cleanse");
联系我们
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

支付宝支付
联系客服
扫一扫,支付¥

正在加载二维码...

支付完成后,请等待10秒左右,请勿关闭此页

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。