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() {
   }
});
相关文章
|
8月前
|
JavaScript 前端开发
百叶窗效果的jQuery幻灯片插件
百叶窗效果的jQuery幻灯片插件
|
8月前
|
JavaScript
jquery无限循环内容滑块插件
jquery无限循环内容滑块插件
|
8月前
|
JavaScript
简单轻量级的jquery图表插件
简单轻量级的jquery图表插件
|
8月前
|
JavaScript
jQuery响应式内容选项卡插件
jQuery响应式内容选项卡插件
|
8月前
|
JavaScript 前端开发
带完成百分比的jQuery表单插件
带完成百分比的jQuery表单插件
|
8月前
|
JavaScript 内存技术
支持多种动画特效的响应式jQuery幻灯片插件
支持多种动画特效的响应式jQuery幻灯片插件
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
155 1
|
移动开发 JavaScript HTML5
jQuery工具提示插件tooltip.js 使用教程
jQuery工具提示插件tooltip.js 使用教程
|
JavaScript 前端开发 C#
推荐40款强大的 jQuery 导航插件和教程【上篇】
  在这篇文章中,我为大家收集了40款非常棒的 jQuery 导航插件和教程。导航作为网站重要的组成部分,能够帮助用户找到他们想要的内容,因此导航设计的好坏决定了用户能够在你的网站停留更长的时间,浏览更多的内容。
1058 0
|
JavaScript 前端开发 UED
精心挑选的12款优秀 jQuery Ajax 分页插件和教程
  在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示。Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能。
1256 0