微信扫一扫打赏支持

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

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 是一款实现极酷 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>

 

posted @ 2018-07-05 21:23  范仁义  阅读(1189)  评论(0)  编辑  收藏  举报