jquery文字动画特效插件animatext

当前位置:主页 > jQuery库 > 文本和超链接 > jquery文字动画特效插件animatext
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
jquery文字动画特效插件animatext
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2017-07-11
    阅读:
简要教程

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

安装

可以通过npm或bower来安装animatext jquery文字动画插件。

npm install animatext
bower install animatext                  
                

使用方法

在页面中引入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

网友评论