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/

目录
相关文章
|
7月前
|
JSON JavaScript 数据格式
jqtimeline.js-简单又好用的jquery时间轴插件
jqtimeline.js-简单又好用的jquery时间轴插件
|
8月前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
241 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
7月前
|
JavaScript 内存技术
支持多种动画特效的响应式jQuery幻灯片插件
支持多种动画特效的响应式jQuery幻灯片插件
|
7月前
|
JavaScript 前端开发 API
纯js轻量级页面顶部Loading进度条插件
纯js轻量级页面顶部Loading进度条插件
|
9月前
|
JavaScript 前端开发 UED
jquery实现文字点选验证码
通过上述步骤,可以使用jQuery实现一个功能完整、易用的文字点选验证码系统。该系统不仅能够有效防止自动化攻击,还可以通过友好的交互提升用户体验。希望本文的详解能够为开发者提供有价值的参考,帮助实现高效的验证码功能。
256 14
|
9月前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
123 22
|
10月前
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
|
10月前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
238 9
|
前端开发 API 开发者
Next.js 实战 (五):添加路由 Transition 过渡效果和 Loading 动画
这篇文章介绍了Framer Motion,一个为React设计的动画库,提供了声明式API处理动画和页面转换,适合创建响应式用户界面。文章包括首屏加载动画、路由加载Loading、路由进场和退场动画等主题,并提供了使用Framer Motion和next.js实现这些动画的示例代码。最后,文章总结了这些效果,并邀请读者探讨更好的实现方案。
288 0
Next.js 实战 (五):添加路由 Transition 过渡效果和 Loading 动画
|
10月前
|
JavaScript 容器
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。