Easy jQuery Plugin To Animate Text with CSS3 Transitions and Transforms - TextfxAPI

File Size: 84.5 KB
Views Total: 2939
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Easy jQuery Plugin To Animate Text with CSS3 Transitions and Transforms - TextfxAPI

TextfxAPI is a jQuery plugin worked with jQuery transit script that allows you to apply awesome animations on the text using CSS3 transitions and transforms. The plugin is highly customizable so that you can easily and simply to fade, scale, slide or rotate your text by adding just a little Javascript codes in your markups.

How to use it:

1. Include the required jQuery javascript library and jQuery transit.js in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.transit.js"></script> 

2. Include the jQuery textfx plugin after jQuery library at the bottom of the page.

<script type="text/javascript" src="jquery.textFx.js"></script> 

3. Wrap the text you want to apply on an animation in an Html element.

<div class="demo">Animate Me!</div>

4. Call the plugin on the Html element and set the animation type.

$('.demo').textFx({
type: 'fadeIn'
});

5. All the options to customize the animations.

$('.demo').textFx({
type: 'fadeIn', // fadeIn, slideIn, rotate and scale
iChar: 250, // the delay between each characters animation in ms
iAnim: 500, // the time of the animation for each character in ms
direction: 'top' // only applicable to slide, is the direction (top, left, down, right) the character slides from
});

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