jquery文字动画特效插件分享 animatext.js文档-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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/

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

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章