当前位置：首页 > 网页特效 > 文字效果

jquery文字动画特效插件animatext

分类：文字效果日期：2024-05-14 点击(5) 评论(0)

简介

在页面中引入jquery和animatext.min.js文件，如果需要额外的动画效果，可以添加animate.min.css动画库。

```html
<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结构
你可以为任意标题文字，段落文字添加文字动画特效。例如：

```html
<h3 class="demo">青春，人生当中最美好的时光，不知不觉就会逝去，正因如此，我们才更加感怀青春。</h3>
```
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过animatext()方法来初始化该jquery文字动画特效插件。

```html
$(".demo").animatext();
```
#####  配置参数
文字的显示分为单词和字母两种模式：

```html
// 字母模式
$(".demo").animatext({
  mode: "chars"
});
// 单词模式
$(".demo").animatext({
  mode: "words"
});
```
可以通过reverse参数设置反向显示。

```html
$(".demo").animatext({
  reverse: true
});
```
可以通过infinite参数设置无限循环显示。

```html
$(".demo").animatext({
  infinite: true
});
```
可以通过speed参数设置文字动画的速度。

```html
$(".demo").animatext({
  speed: 150
});
```
你还可以通过group参数来对文字进行分组。

```html
$(".demo").animatext({
  group: true
});
```
可以通过random参数来设置随机显示文字。

```html
$(".demo").animatext({
  random: true
});
```
initDelay参数用于设置显示文字的延迟时间。

```html
$(".demo").animatext({
  initDelay: 0
});
```
timeToRelaunch参数用于设置两次循环文字动画之间的延迟时间。

```html
$(".demo").animatext({
  timeToRelaunch: 2000
});
```
最后，还有两个可用的回调函数。

```html
$(".demo").animatext({
  onBegin: function() {},
  onSuccess: function() {}
});
```