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. nice---进程优先级

    在当前程序运行优先级基础之上调整指定值得到新的程序运行优先级,用新的程序运行优先级运行命令行"command [arguments...]".优先级的范围为-20 - 19 等40 ...

  3. 01-Jvm 内存区域复习笔记

    Java内存区域          1.程序计数器(Program Counter Register)         在虚拟机中一块较小的内存空间.它的作用能够看做是当前线程所运行的字节码的行号指示 ...

  4. 关于client浏览器界面文字内容溢出用省略号表示方法

    在实际的项目中,因为client浏览器文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其它标签,下同)区域的情况.此时比較好的做法就是当文字超过限定的div宽度后自己主动以省 ...

  5. amazeui的表单开关插件的自定义事件必须添加.bootstrapSwitch 命名空间，给了我们什么启示

    amazeui的表单开关插件的自定义事件必须添加.bootstrapSwitch 命名空间,给了我们什么启示 一.总结 一句话总结:详细看使用文档(说明文档说的真的是非常详细呢,不过循序渐进,不同阶段 ...

  6. js刷新页面有哪几种方法

    js刷新页面有哪几种方法 一.总结 一句话总结:location属性的reload方法即可:document.location.reload() 1.页面刷新有哪常见的8种方法? 1,history. ...

  7. CISP/CISA 每日一题 13

    监控信息系统人员所提供服务的效率和效果的工具: 1.例外报告:识别所有没有成功完成的或出了故障的应用 2.作业重运行报告:大多数异常终止作业都会导致重起 3.操作员问题报告:记录计算机运行问题及解决方 ...

  8. 简单的横向ListView实现(version 4.0)

    这个版本号的博客写起来颇费口舌.有些代码自己语言组织能力有限,感觉描写叙述起来非常费劲,前前后后改了五六遍稿子还是不尽人意 ,只是我还是坚持写出来自己当初的思路,假设看得不明确的地方我在文章最后仍然会 ...

  9. hdu5301(2015多校2)--Buildings（构造）

    Buildings Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Tota ...

  10. ontouch、dispatchtouchevent、interceptouchevent-相关事件

    这几天一直在研究onTouch的相关方法,今天我们就来看看onTouchEvent.dispatchTouchEvent.onIntercepTouchEvent这三个方法在控件之间的传递顺序 pub ...