开发者社区> 佀无极> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jquery文字动画特效插件分享 animatext.js文档

简介:
+关注继续查看

animatext.js文档

animatext是一款简单的jquery文字动画特效插件。通过该jquery文字动画插件,你可以在显示一串文字时,添加多种炫酷的动画效果。

使用方法
在页面中引入jquery和animatext.min.js文件,如果需要额外的动画效果,可以添加animate.min.css动画库。
<link rel="stylesheet" href="css/animate.min.css" type="text/css" />
<script src="path/to/jquery.min.js"></script>
<script src="path/to/animatext.min.js"></script>

HTML结构
你可以为任意标题文字,段落文字添加文字动画特效。例如:
<h3 class="demo">青春,人生当中最美好的时光,不知不觉就会逝去,正因如此,我们才更加感怀青春。</h3>


初始化插件
在页面DOM元素加载完毕之后,可以通过animatext()方法来初始化该jquery文字动画特效插件。
$(".demo").animatext();


配置参数
文字的显示分为单词和字母两种模式:
// 字母模式
$(".demo").animatext({
  mode: "chars"
});
// 单词模式
$(".demo").animatext({
  mode: "words"
});
可以通过reverse参数设置反向显示。
$(".demo").animatext({
  reverse: true
});
可以通过infinite参数设置无限循环显示。
$(".demo").animatext({
  infinite: true
});
可以通过speed参数设置文字动画的速度。
$(".demo").animatext({
  speed: 150
});
你还可以通过group参数来对文字进行分组。
$(".demo").animatext({
  group: true
});
可以通过random参数来设置随机显示文字。
$(".demo").animatext({
  random: true
});
initDelay参数用于设置显示文字的延迟时间。
$(".demo").animatext({
  initDelay: 0
});
timeToRelaunch参数用于设置两次循环文字动画之间的延迟时间。
$(".demo").animatext({
  timeToRelaunch: 2000
});
最后,还有两个可用的回调函数。
$(".demo").animatext({
  onBegin: function() {},
  onSuccess: function() {}
});

animatext jquery文字动画特效插件的github地址为:https://github.com/oscarlijo/animatext
示例地址:http://www.oscarlijo.com/animatext/

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
精心挑选的12款优秀 jQuery 手风琴效果插件和教程
  当你想在有限的页面空间内展示多个内容片段的时候,手风琴(Accordion)效果就显得非常有用,它可以帮助你以对用户非常友好的方式实现多个内容片段之间的切换。借助流行的 jQuery 框架,只需很少的代码就可以实现精美的手风琴效果,帮助你的网站吸引更多用户的眼球。
1158 0
分享精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了20个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示。Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能。
1106 0
精心挑选的12款优秀 jQuery Ajax 分页插件和教程
  在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示。Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能。
1067 0
精心挑选的15款优秀 jQuery 文本特效插件和教程
  今天这篇文章向大家分享15款精心挑选的优秀 jQuery 文本特效插件,都带有详细的使用教程。jQuery 是最流行和使用最广泛的 JavaScript 框架,它简化了 HTML 文档遍历,事件处理,动画以及Ajax交互,帮助 Web 开发人员更快速的实现各种精美的界面效果。
1078 0
40个新鲜出炉的 jQuery 插件和免费教程【上篇】
  作为最流行的 JavaScript 库,jQuery 拥有丰富的插件,能够帮助开发者简单快速的实现各种功能。但对于 Web 开发人员来说,他们需要掌握编写插件的方法,这样在工作中才能游刃有余。今天这篇文章收集了40个非常棒的 jQuery 插件及其制作教程,这些插件能够为你将来的项目增添各种很炫功能和效果,同时通过详细的制作教程帮助你更加深入的掌握 jQuery 库的使用。
968 0
8个很棒的 jQuery 倒计时插件和教程
jQuery 是最流行也是使用最广泛的 JavaScript 框架,它简化了 HTML 文档操作,事件处理,动画效果和 Ajax 交互。下面向大家分享8个优秀的 jQuery倒计时插件和教程。 jQuery Countdown spriteTimer php ajax/jque...
810 0
10个实用的jQuery交互/通信插件和教程
在网站或应用程序中添加交互或通信功能,可以为用户带来非常棒的使用体验。本文整理了10个非常实用的jQuery插件和教程,可以帮助你在网站或应用中整合交互或通信功能,如新闻预览、显示最近日志的小部件、友情链接侧边栏等。
1013 0
20+ 个很棒的 jQuery 文件上传插件或教程
文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验。本文介绍20个jQuery的文件上传插件,其中有一些是教程。 1. Plupload Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度、图像自动缩略和上传分块。
1098 0
40款非常棒的 jQuery 插件和制作教程(系列二)
  jQuery 在现在的 Web 开发项目中扮演着重要角色,jQuery 让网站有更好的可用性和用户体验,让访问者对网站留下非常好的印象。jQuery 以其插件众多、独特、轻量以及支持大规模的网站开发闻名。
982 0
25个非常棒的jQuery滑块插件和教程
  图像滑块和幻灯片效果,已成为网页设计的基本要素。它们以有趣的方式展示视觉内容。如果你一直想知道这是如何实现的,那么这里的25个非常棒的 jQuery 图片滑块制作教程将帮助您实现这种效果。 1.
1048 0
+关注
佀无极
脚踏实地,心存高远!
文章
问答
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载