Textillate.js使用CSS3实现文字动画效果的jQuery插件

Textillate.js使用CSS3实现文字动画效果的jQuery插件

更新: 2017-11-9

阅读:1191

开源:GitHub

Textillate.js 是一个神奇的 jQuery 插件,用 Textillate.js 你可以轻松创建你想要的动画文字效果。能实现基于animate.css CSS3 动画库中的所有动画,而 animate.css 预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种文字动画效果,

依懒库

[jQuery]

[animate.css] --- CSS3动画库 下载Animate.css

[lettering.js] 一个使文字适应更好的页面排版简单而有效的jQuery插件

插件安装

在页面上引入相关js和CSS文件

<script src="http://apps.bdimg.com/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/jquery.lettering.js"></script>
<script src="js/jquery.textillate.js"></script>
<link rel="stylesheet" href="css/animate.css" /> 

使用方法

$('.text1').textillate();


事件

  • start.tlt:textillate开始时触发
  • inAnimationBegin.tlt:动画进入开始时触发
  • inAnimationEnd.tlt:动画进入结束时触发
  • outAnimationBegin.tlt:动画退出开始时触发
  • outAnimationEnd.tlt:动画退出结束时触发
  • end.tlt:textillate结束触发