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>