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. JS面向对象逆向学习法,让难理解的统统一边去(1)~

    对于面向对象我只能说呵呵了,为什么呢,因为没对象--- 既然你看到了这里,说明你有一定的基础,虽然本系列文章并不会过多的讲述基础部分,请做好心理准备. 本篇比较简单,这篇文章的意义是让你明白学习面向对 ...

  2. 【WP开发】使用磁倾仪

    磁倾仪,也叫倾斜仪,主要用来检测手机设备在各个轴上旋转的角度.注意,磁倾仪与陀螺仪的差异,陀螺仪的关注点是旋转的角速度,它并不关注角度,只注重速度.而磁倾仪的读数就是设备倾斜的角度. 不管是使用重力感 ...

  3. WEBAPP开发技巧(手机网站开发注意事项)

    以下只是我个人得总结,如果你有更好的建议,请留言,一起共勉进步!!- -! 1.要响应式开发web,也就是页面必须自适应屏幕大小,可以采用流体布局,如之前的文章(自适应宽度布局),其他具体的小问题可以 ...

  4. Shader预处理宏、内置状态变量、多版本编译等

    预定义shader预处理宏: Target platform: SHADER_API_OPENGL - desktop OpenGL SHADER_API_D3D9 - Direct3D SHADER ...

  5. 深入理解CSS线性渐变linear-gradient

    × 目录 [1]定义 [2]渐变线 [3]色标 [4]重复渐变 [5]多背景 [6]应用场景 [7]IE兼容 前面的话 在CSS3出现之前,渐变效果只能通过图形软件设计图片来实现,可拓展性差,还影响性 ...

  6. OCP-052 & 053部分答案解析

    OCP~052 . GRANT ANY OBJECT PRIVILEGE(授予任何对象权限):允许被授权人将其本身不拥有的对象的对象权限授予他人,但不能授予自己. . ENABLE VALIDATE ...

  7. 邻接矩阵无向图(二)之 C++详解

    本章是通过C++实现邻接矩阵无向图. 目录 1. 邻接矩阵无向图的介绍 2. 邻接矩阵无向图的代码说明 3. 邻接矩阵无向图的完整源码 转载请注明出处:http://www.cnblogs.com/s ...

  8. CAD2015安装教程 AutoCAD2015中文版安装激活图文教程

    28年来,Autodesk一直在坚持不懈地帮助客户提高设计流程效率.AutoCAD提供了可靠的三维自由形状设计工具以及强大的绘图和文档制作功能,在全球拥有数百万用户. autocad2015具有广泛的 ...

  9. 机器学习&数据挖掘笔记_21(PGM练习五:图模型的近似推理)

    前言: 这次练习完成的是图模型的近似推理,参考的内容是coursera课程:Probabilistic Graphical Models . 上次实验PGM练习四:图模型的精确推理 中介绍的是图模型的 ...

  10. MySQL修改默认字符集

    今天朋友在做某个程序项目时,需要修改MySQL修改默认字符集,搞不好找我帮忙.百度了试了好几篇博文中的方法,最后终于成功了.但是感觉那些博文思路有点乱,所以自己总结下,希望可以帮到遇到同样问题的人. ...