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都引进来

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

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

   <link href="assets/style.css" rel="stylesheet">

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

   <script src="assets/jquery.fittext.js"></script>

   <script src="assets/jquery.lettering.js"></script>

   <script src="jquery.textillate.js"></script>

 </head>

 <body>

     <div id="texts" style="margin:30px auto;">

     <span>中文可以么Welcome To shouceWelcome To shouceWelcome </span>

   </div>

 </body>

 <script>

 $(function() {

  // 动画效果

  $('#texts').textillate({

     loop: true,

     autoStart: true,

     in: {

     shuffle: false,

     effect: 'bounce'},

     out: {

     effect: 'hinge',

     delayScale: 1.5,

     delay: 30,

     sync: false,

     shuffle: true,

     reverse: false,

     callback: function () {}

   }

  });

 })

 </script>

 </html>

Textillate.js有什么用及使用实例的更多相关文章

  1. textillate.js 文字动画

    textillate.js是一款强大的文字插件,若配合animate.css.fittext.lettering一起使用,这样做出来的文字特效很完美. 在线实例 实例演示 使用方法 <div i ...

  2. JS - 超强大文本动画插件Textillate.js

    http://www.yyyweb.com/demo/textillate/ Textillate.js AsimplepluginforCSS3textanimations.

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

    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...

  4. 关于js函数，方法，对象实例的一些说明

    朋友们大家好,好久没有更新文章了,最近正好有空就想着写点什么吧,加上这段时间总是能听到一些朋友们问关于js函数,方法,对象实例到底有什么区别这个问题,所以今天就献丑来简单说明一些吧! 其实这些主要都是 ...

  5. 【转】JS回调函数--简单易懂有实例

    JS回调函数--简单易懂有实例 初学js的时候,被回调函数搞得很晕,现在回过头来总结一下什么是回调函数. 我们先来看看回调的英文定义:A callback is a function that is ...

  6. js的dom对象（带实例超详细全解）

    js的dom对象(带实例超详细全解) 一.总结 一句话总结: 1.DOM中的方法区分大小写么? 解答:区分 2.DOM中元素和节点的关系式什么? 解答:元素就是标签,节点中有元素节点,也是标签,节点中 ...

  7. jquery中的each用法以及js中的each方法实现实例

    each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, JSON 等等在javaScript开发过程中使用$ ...

  8. Vue.js 1.x 和 2.x 实例的生命周期

    在Vue.js中,在实例化Vue之前,它们都是以HTML的文本形式存在文本编辑器中.当实例化后将经历创建.编译.销毁三个主要阶段. 以下是Vue.js 1.x  实例的生命周期图示: Vue.js 1 ...

  9. 原生js实现分页效果（带实例）

    小小插件(静态分页) 效果图: 首先实现简单功能: <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

随机推荐

  1. 转 EL表达式

    EL表达式 一.EL表达式简介 EL 全名为Expression Language.EL主要作用: 1.获取数据 EL表达式主要用于替换JSP页面中的脚本表达式,以从各种类型的web域 中检索java ...

  2. 初识Oracle中的正则表达式

    Oracle使用正则表达式离不开这4个函数: 1.regexp_like 2.regexp_substr 3.regexp_instr 4.regexp_replace  

  3. HDU 6182 A Math

    A Math Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  4. BZOJ3336: Uva10572 Black and White(插头Dp)

    解题思路: 分类讨论即可. 代码(懒得删Debug了): #include<map> #include<cstdio> #include<vector> #incl ...

  5. ArcSDE：C#创建SDE要素数据集

    转自原文 ArcSDE:C#创建SDE要素数据集 /// <summary> /// 判断指定数据集是否存在 /// </summary> /// <param name ...

  6. 【MongoDB】mongodump and mongorestore of mogodb

    The another tool will be mentioned in this blog, namely mongodump and mongorestore. General speaking ...

  7. linux 批量设置文件夹755 文件644权限

    linux 批量设置文件夹755 文件644权限 文件来源 http://www.111cn.net/sys/linux/109724.htm 本文章来为各位介绍一篇关于linux 批量设置文件夹75 ...

  8. NOIP2015运输计划（二分答案）

    题目描述 公元2044年,人类进入了宇宙纪元. L国有n个星球,还有n-1条双向航道,每条航道建立在两个星球之间,这n-1条航道连通了L国的所有星球. 小P掌管一家物流公司,该公司有很多个运输计划,每 ...

  9. 字符设备驱动-----Linux中断处理体系结构

    一.中断处理体系结构的初始化 Linux内核将所有的中断统一编号,使用一个irq_desc结构数组来描述这些中断;每个数组项对应一个中断,也可能是一组中断,它们共用相同的中断号,里面记录了中断的名称. ...

  10. telnet不是内部命令也不是外部命令

    转自:https://www.cnblogs.com/sishang/p/6600977.html 处理办法: 依次打开“开始”→“控制面板”→“打开或关闭Windows功能”,在打开的窗口处,寻找并 ...