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

在线实例

实例演示

使用方法

  1. <div id="texts">Welcome To shouce</div>
复制
  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 文字动画的更多相关文章

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

    Textillate.js有什么用及使用实例 一.总结 一句话总结:Textillate.js – 实现动感的 CSS3 文本动画的简单插件 二.textillate.js 文字动画 textilla ...

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

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

  3. JS框架_(Typed.js)彩色霓虹灯发光文字动画

    百度云盘 传送门 密码:8oei 发光文字动画效果: <!doctype html> <html> <head> <meta charset="ut ...

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

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

  5. 使用veloticy-ui生成文字动画

    前言 最近要实现一个类似文字波浪线的效果,使用了velocity-ui这个动画库,第一个感觉就是使用简单,代码量少,性能优异,在此简单介绍一下使用方法,并实现一个看上去不错的动画.具体使用方法可以点击 ...

  6. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  7. js双层动画幻灯

    js双层动画幻灯 点击下载

  8. 分享十个CSS3鼠标滑过文字动画特效

    介绍10组基于CSS3的鼠标滑过文字动画特效,有上凸.下凹等文字动画.这些炫酷的CSS3文字效果可以让网页变得更加绚丽.效果图如下: 在线预览   源码下载 实现的代码. html代码: <h2 ...

  9. 仿知乎/途家导航栏渐变文字动画效果-b

    demo.gif 效果图如上,简单分析下 1.导航栏一开始是隐藏的,随着scrollView滚动而渐变 2.导航栏左右两边的navigationItem是一直显示的 3.导航栏参考了途家app,使用了 ...

随机推荐

  1. 在configure distribution时遇到错误,不能打开sql agent

    今天在配置Distribution时,遇到一个错误,不能打开sql agent,详细错误信息如下: SQL Server blocked access to procedure 'dbo.sp_set ...

  2. 执行SSIS Package的三种方式

    1,使用SQL Server job 创建一个job用于执行package,可以制定一个schedule来定时执行job,也可以使用TSql 代码来执行job EXEC msdb.dbo.sp_sta ...

  3. switch判断注意点

    if判断,如果判断的两个值类型不同,会继续隐性转换,==,当然如果使用===就不会. 1 if(2=="2"){ 2 console.log("true"); ...

  4. 用命令行编译java并生成可执行的jar包

    用命令行编译java并生成可执行的jar包 1.编写源代码. 编写源文件:CardLayoutDemo.java并保存,例如:I:\myApp\CardLayoutDemo.java.程序结构如下: ...

  5. backbone库学习-Collection

    backbone库的结构: http://www.cnblogs.com/nuysoft/archive/2012/03/19/2404274.html 本文所有例子来自于http://blog.cs ...

  6. 打开都是“Smart Adobe CC Blocker v1.0”已损坏,打不开。 您应该将它移到废纸篓。

    安全设置里允许任意来源打开就可以了 “系统偏好设置”->“安全性与隐私”->“允许从以下位置下载的应用程序”->任何来源.

  7. Testing - 测试基础 - 自动

    自动化测试模型 一个自动化测试框架就是一个集成体系,在这一体系中包含测试功能的函数库.测试数据源.测试对象识别标准,以及种可重用的模块. 自动化测试框架在发展的过程中,不断有新的模型(概念)被提出,目 ...

  8. 美妙的 CSS3 动画!一组梦幻般的按钮效果

    今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...

  9. 碉堡了! 纯 CSS 绘制《辛普森一家》人物头像

    这篇文章给大家分享一组纯 CSS 绘制的<辛普森一家>人物头像.<辛普森一家>(The Simpsons)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧.该剧通过对霍 ...

  10. 如何用Ajax加载服务器的图片

    用Ajax请求服务器的图片,并显示在浏览器中 前言 一直在数据库里面存的都是图片在服务器的地址,然后再到浏览器中显示,但是发现两个问题 第一:为了安全起见,js是无法读取本地的图片的,不然你写一个js ...