jquery文字动画特效插件animatext

简介: jquery文字动画特效插件animatext

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

tx000494.png

在线预览 下载

安装

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

npm install anima-text
bower install anima-text

使用方法

在页面中引入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() {
   }
});
相关文章
|
10天前
|
移动开发 JavaScript 前端开发
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
|
8天前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
20 2
|
8天前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
|
10天前
|
JavaScript 容器
jQuery消息通知显示插件
MessageNotifyPlugin是一款简单的jQuery消息通知显示插件。该jQuery消息通知显示插件能够自动生成最新消息和提醒消息两个消息通知按钮。并且可以设置消息的是否已读状态等
17 2
|
8天前
|
JavaScript 前端开发
jquery输入框键入文字动画特效
这是一款炫酷的jquery输入框键入文字动画特效。该文字特效在用户键入字母时,通过jquery代码来制作文字的动画效果,非常炫酷。
20 0
|
JavaScript 前端开发 容器
|
11天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
51 21
|
12天前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
43 16
|
12天前
|
JavaScript
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。
|
11天前
|
JavaScript 容器
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。