Textillate.js有什么用及使用实例
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都引进来
<!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有什么用及使用实例的更多相关文章
- textillate.js 文字动画
textillate.js是一款强大的文字插件,若配合animate.css.fittext.lettering一起使用,这样做出来的文字特效很完美. 在线实例 实例演示 使用方法 <div i ...
- JS - 超强大文本动画插件Textillate.js
http://www.yyyweb.com/demo/textillate/ Textillate.js AsimplepluginforCSS3textanimations.
- jquery使用CSS3实现文字动画效果插件Textillate.js
Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...
- 关于js函数，方法，对象实例的一些说明
朋友们大家好,好久没有更新文章了,最近正好有空就想着写点什么吧,加上这段时间总是能听到一些朋友们问关于js函数,方法,对象实例到底有什么区别这个问题,所以今天就献丑来简单说明一些吧! 其实这些主要都是 ...
- 【转】JS回调函数--简单易懂有实例
JS回调函数--简单易懂有实例 初学js的时候,被回调函数搞得很晕,现在回过头来总结一下什么是回调函数. 我们先来看看回调的英文定义:A callback is a function that is ...
- js的dom对象（带实例超详细全解）
js的dom对象(带实例超详细全解) 一.总结 一句话总结: 1.DOM中的方法区分大小写么? 解答:区分 2.DOM中元素和节点的关系式什么? 解答:元素就是标签,节点中有元素节点,也是标签,节点中 ...
- jquery中的each用法以及js中的each方法实现实例
each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, JSON 等等在javaScript开发过程中使用$ ...
- Vue.js 1.x 和 2.x 实例的生命周期
在Vue.js中,在实例化Vue之前,它们都是以HTML的文本形式存在文本编辑器中.当实例化后将经历创建.编译.销毁三个主要阶段. 以下是Vue.js 1.x 实例的生命周期图示: Vue.js 1 ...
- 原生js实现分页效果（带实例）
小小插件(静态分页) 效果图: 首先实现简单功能: <!DOCTYPE html> <html> <head> <meta http-equiv=" ...
随机推荐
- 2011年度十大杰出IT博客获奖感言
2011年度十大杰出IT博客获奖感言 在各位评委.网友的支持下,我的博客从前50名中脱颖而出跻身10强,得到这个消息之后心中充满了喜悦.在这里要感谢51CTO为大家提供这样一个良好的展示平台. ...
- 完整性检查工具Nabou
完整性检查工具Nabou 650) this.width=650;" onclick="window.open("http://blog.51cto.com/viewpi ...
- 网管软件 LANDesk的配置(视频配截图)
网管软件 LANDesk Server Manager 8.5的配置截图 LANDesk桌面管理套件是应用于大中型企业环境下的计算机管理的最佳解决方案.它提供了从计算机资产管理.软件分 ...
- 英语 用on还是/at/还是in
in prep. 1. [表示地点.场所.位置等]在…里面:在…内部:在…上:例句: in the room 在房间里 2. [表示时间]在…期间:在(一段时间)以内:过…之久:例句: in su ...
- storm单机运行与集群运行问题
使用trident接口时,storm读取kafka数据会将kafka消费记录保存起来,将消费记录的位置保存在tridentTopology.newStream()的第一个参数里, 如果设置成从头开始消 ...
- 【剑指Offer学习】【面试题49：把字符串转换成整数】
题目:实现一个函数stringToInt,实现把字符串转换成整数这个功能.不能使用atoi或者其它相似的库函数. 题目解析 这看起来是非常easy的题目,实现基本功能 ,大部分人都能用10行之内的代码 ...
- 带你一分钟理解闭包--js面向对象编程(转载他人)
什么是闭包? 先看一段代码: function a(){ var n = 0; function inc() { n++; console.log(n); } inc(); inc(); } a(); ...
- mahout历史（二）
mahout历史 Apache Mahout起源于2008年,经过两年的发展,2010年4月ApacheMahout最终成为了Apache的顶级项目.Mahout 项目是由 ApacheLucene( ...
- gomail发送附件
采用github.com/go-gomail/gomail/ 的邮件功能,可以发送附件 以及html文档,下面是其给出的demo,测试通过. package main //cmd: go get go ...
- golang excel
github.com/tealeg/xlsx 封装的接口简单易用 package main import ( "bufio" "fmt" "githu ...