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

一、总结

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

 

 

二、textillate.js 文字动画

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

在线实例

使用方法

1. <div id="texts">Welcome To shouce

复制

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

复制

参数详解

参数	描述	默认值
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 是一款实现极酷  文本动画的简单插件。它整合了两个流行的工具库（animate.css 和 lettering.js）来提供易于使用的插件，能够把 CSS3 动画应用到文本内容上。

 

第一步：

    当然是下载插件，下载地址（）；

第二步：

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

     //css文件

    

 
     
      
     //(注意这几个文件最好放在最后面引入)
    

第三步：

    用法 html中 

    
     Title
    

    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  2  3  4     
      5      6   
      7   
      8    9   10   11   12 13 14     
     
      15     
      中文可以么Welcome To shouceWelcome To shouceWelcome 16   
     
17 18 19 41