jQuery Text Animation Plugin with CSS3 - textillate

jQuery Text Animation Plugin with CSS3 - textillate
File Size: 17.1 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

textillate is a simple jQuery plugin for creating awesome text animation effects with CSS3.  textillate combines jQuery library, lettering.js and textillate.js to apply CSS3 animations for any text in an easy way.

See also:

How to use it:

1. Include jQuery library and other dependency files on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/jquery.fittext.js"></script> 
<script src="assets/jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script>

2. Include animate CSS on the page

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

3. The html

<div class="demo">
<p>jQuery Script</p>
</div>

3. The javascript

<script>
  $(function (){
    var animateClasses = 'flash bounce shake tada swing wobble pulse flip flipInX flipOutX flipInY flipOutY fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig fadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig fadeOutDownBig fadeOutLeftBig fadeOutRightBig bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight hinge rollIn rollOut';

    $('.demo p')
      .fitText(0.5)
      .textillate({ in: { effect: 'flipInY' }});
  });

</script>

4. More options

$('.demo').textillate({
  
  selector: '.texts', // the default selector to use when detecting multiple texts to animate
  loop: false, // enable looping
  minDisplayTime: 2000, // sets the minimum display time for each text before it is replaced
  initialDelay: 0,  // sets the initial delay before starting the animation
  autoStart: true,  // set whether or not to automatically start animating
  inEffects: [], // custom set of 'in' effects. This effects whether or not the character is shown/hidden before or after an animation  
  outEffects: [ 'hinge' ],   // custom set of 'out' effects

  // in animation settings
  in: {
    effect: 'fadeInLeftBig', // set the effect name
    delayScale: 1.5, // set the delay factor applied to each consecutive character
    delay: 50, // set the delay between each character
    sync: false,  // set to true to animate all the characters at the same time
    shuffle: false  // randomize the character sequence (note that shuffle doesn't make sense with sync = true)
  },

  // out animation settings.
  out: {
    effect: 'hinge',
    delayScale: 1.5,
    delay: 50,
    sync: false,
    shuffle: false,
  }
});

This awesome jQuery plugin is developed by jschr. For more Advanced Usages, please check the demo page or visit the official website.