Jquery Plugin For CSS3 Text Animations – Textillate.js

Textillate.js combines some awing libraries to produce a ease-to-use plugin for applying CSS3 animations to any text.

Simply embody textillate.js and it’s dependencies in your project to begin making unique effects.

Textillate.js is constructed on high of the straightforward, nonetheless surprisingly powerful animate.css and piece of writing.js libraries.

Features:

• Easy to use and customizeable with CSS.
• Multiple texts animation with minimal settings.
• Set display time manually as you need.
• Choose various type of animation from animate.css

How to use it:

1. Load the required JavaScript jquery.lettering.js and jquery.textillate.js in the HTML page.

<script src="/path/to/jquery.lettering.js"></script>
<script src="/path/to/jquery.textillate.js"></script>

2. Load the required Stylesheet animate.css in the HTML page.

<link rel="stylesheet" href="/path/to/animate.css">

3. The HTML structure to create a textillate animation.

<div class="tlt">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

4. Initialize the textillate and we’re ready to go.

$(function () {
  $('.tlt').textillate({
    loop: true,
    in:{
      effect: 'flipInX'
    },
    out: {
      effect: 'fadeOut'
    }
  });
});

Plugin’s default configuration options:

$('.tlt').textillate({
  selector: '.texts',
  loop: false,
  minDisplayTime: 2000,
  initialDelay: 0,
  autoStart: true,
  inEffects: [],
  outEffects: [ 'hinge' ],
  in: {
    effect: 'fadeInLeftBig',
    delayScale: 1.5,
    delay: 50,
    sync: false,
    shuffle: false,
    reverse: false,
    callback: function () {}
  },
  out: {
    effect: 'hinge',
    delayScale: 1.5,
    delay: 50,
    sync: false,
    shuffle: false,
    reverse: false,
    callback: function () {}
  },

  callback: function () {},
  type: 'char'
});

Plugin’s Options: