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获取问题

    如果一段html嵌套过多,在js中获取还是比较麻烦的,我写了几套方案,大家可以参考参考,如果你有好的方法,也分享出来,让我们瞧瞧. HTML: <!DOCTYPE html> <ht ...

  2. php基础教程-语法

    PHP 脚本可放置于文档中的任何位置.PHP 脚本以 <?php 开头,以 ?> 结尾: <?php // 此处是 PHP 代码 ?> PHP 文件的默认文件扩展名是 &quo ...

  3. Android自定义EditText去除边框并添加下划线

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  4. CSS好看的按钮

    好看的按钮 <style> .btn { BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd ...

  5. java反射实现动态代理

    参考:http://www.cnblogs.com/rollenholt/archive/2011/09/02/2163758.html http://my.oschina.net/lyp3314/b ...

  6. 第18/24周 乐观并发控制(Optimistic Concurrency)

    大家好,欢迎回到性能调优培训.上个星期我通过讨论悲观并发模式拉开了第5个月培训的序幕.今天我们继续,讨论下乐观并发模式(Optimistic Concurrency). 行版本(Row Version ...

  7. 实现UniqueAttribute唯一性约束

    using System; using System.ComponentModel.DataAnnotations; using System.Data.Entity; namespace Zwj.T ...

  8. IOS开发技巧快速生成二维码

    随着移动互联网的发展,二维码应用非常普遍,各大商场,饭店,水果店 基本都有二维码的身影,那么ios中怎么生成二维码呢? 下面的的程序演示了快速生成二维码的方法: 在ios里面要生成二维码,需要借助一个 ...

  9. SQL--使用NewID函数,创建GUID列

    USE master GO IF EXISTS (SELECT * FROM sysdatabases WHERE name='DB_Temp') DROP DATABASE DB_Temp GO C ...

  10. ASP.NET MVC初识

    最近在博客园看到了很多关于MVC的示例,自己打算写下来记录一下,如果有写得不对的地方,望大侠指出! 开始搭建项目 1. 建立Web项目 文件—>新建项目—>选择ASP.NET MVC4 W ...