Textillate.js有什么用及使用实例-CSDN博客

Textillate.js有什么用及使用实例

一、总结

一句话总结：Textillate.js – 实现动感的 CSS3 文本动画的简单插件

二、textillate.js 文字动画

textillate.js是一款强大的文字插件,若配合animate.css、fittext、lettering一起使用，这样做出来的文字特效很完美。

在线实例

实例演示

使用方法

<div id="texts">Welcome To shouce

复制

$(function() {
$('#texts').fitText(3.2, {maxFontSize: 18}).textillate({initialDelay: 1000, in: {delay: 3, shuffle: true}});
})

复制

参数详解

参数	描述	默认值
selector	目标选择器	.texts
loop	是否循环	false
minDisplayTime	最小间隔时间	2000
initialDelay	初始化间隔时间	0
in	{ effect: 'fadeInLeftBig', delayScale: 1.5, delay: 50, sync: false, reverse: false, shuffle: false, callback: function () {} }	-
out	{ effect: 'hinge', delayScale: 1.5, delay: 50, sync: false, reverse: false, shuffle: false, callback: function () {} }	-
autoStart	自动开始	true
callback	回调函数 function () {}	-

下载

三、Textillate.js 使用

Textillate.js 是一款实现极酷 CSS3 文本动画的简单插件。它整合了两个流行的工具库（animate.css 和 lettering.js）来提供易于使用的插件，能够把 CSS3 动画应用到文本内容上。

第一步：

当然是下载插件，下载地址（https://github.com/jschr/textillate）；

第二步：

当然是引用文件，此插件是基于 jquery的所以你的项目中必须包含 jquery插件（这个简单自己下吧），然后就是把它的必要文件引入！

<link rel="stylesheet" href="css/animate.css" /> //css文件

 <script src="textJs/jquery.fittext.js"></script>  <script src="textJs/jquery.lettering.js"></script>  <script src="textJs/jquery.textillate.js"></script>//(注意这几个文件最好放在最后面引入)

第三步：

用法 html中

<h1 class="tlt" data-in-effect="rollIn">Title</h1>

js中

$('.tlt').textillate();

第四步：配置

$('.tlt').textillate({
  // the default selector to use when detecting multiple texts to animate
  selector: '.texts',

  // enable looping
  loop: false,   // sets the minimum display time for each text before it is replaced   minDisplayTime: 2000,   // sets the initial delay before starting the animation   // (note that depending on the in effect you may need to manually apply    // visibility: hidden to the element before running this plugin)   initialDelay: 0,   // set whether or not to automatically start animating   autoStart: true,   // custom set of 'in' effects. This effects whether or not the    // character is shown/hidden before or after an animation     inEffects: [],   // custom set of 'out' effects   outEffects: [ 'hinge' ],   // in animation settings   in: {     // set the effect name     effect: 'fadeInLeftBig',     // set the delay factor applied to each consecutive character     delayScale: 1.5,     // set the delay between each character     delay: 50,     // set to true to animate all the characters at the same time     sync: false,     // randomize the character sequence      // (note that shuffle doesn't make sense with sync = true)     shuffle: false,     // reverse the character sequence      // (note that reverse doesn't make sense with sync = true)     reverse: false,     // callback that executes once the animation has finished     callback: function () {}   },   // out animation settings.   out: {     effect: 'hinge',     delayScale: 1.5,     delay: 50,     sync: false,     shuffle: false,     reverse: false,     callback: function () {}   },   // callback that executes once textillate has finished    callback: function () {}});

四、自己完整案例

记得把js和css都引进来

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6   <link href="assets/animate.css" rel="stylesheet">
 7   <link href="assets/style.css" rel="stylesheet">
 8   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 9   <script src="assets/jquery.fittext.js"></script>
10   <script src="assets/jquery.lettering.js"></script>
11   <script src="jquery.textillate.js"></script>
12 </head>
13 <body>
14     <div id="texts" style="margin:30px auto;">
15     <span>中文可以么Welcome To shouceWelcome To shouceWelcome </span>
16   </div>
17 </body>
18 
19 <script>
20 $(function() { 
21  // 动画效果
22  $('#texts').textillate({
23     loop: true,
24     autoStart: true,
25     in: {
26     shuffle: false,
27     effect: 'bounce'},
28     out: {
29     effect: 'hinge',
30     delayScale: 1.5,
31     delay: 30,
32     sync: false,
33     shuffle: true,
34     reverse: false,
35     callback: function () {}
36   }
37  });
38 
39 })
40 </script>
41 </html>