jQuery & CSS3 Based Text Animation Effect Plugin - LetterFX

LetterFX is a lightweight jQuery & CSS3 plugin that applies fancy animation effects to your text such as fade, rotate, fly, swirl, spin, smear and much more.

Basic Usage:

1. Include the jQuery LetterFx plugin's stylesheet in the head section of the Html document.

<link href="jquery-letterfx.css" rel="stylesheet" type="text/css" />

2. Include the latest JQuery javascript library and jQuery LetterFx plugin's script at the end of the Html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="jquery-letterfx.js"></script>

3. Wrap the text in an Html element with a CSS class name.

<p class="demo"> Your text here </p>

4. Call the plugin on the Html element and set the options for the text animation.

$(".demo").letterfx({OPTIONS});

5. Available options.

$(".demo").letterfx({
// A space seperated list of fx to apply to the letters.
// Options are extendable, but out of the box they include, spin, fly-left, fly-right, fly-top, fly-bottom, fall, fade, smear.
fx:'spin fly-top',

// defaults to selecting all characters
pattern:/(\S)/gi,

// switch from letter FX to word FX.
word:false,

// fx, like fly or fade, can happen in (eg fade-in) or out (eg fade-out).
// The default is in; change backwards to true to reverse the order of the effects.
backwards:false,

// defaults to injecting spans, can be any inline element
replacement:"<span>$1</span>",

//selector -- should match replacement above
selector:'span',

// letter fx start sequentially: letters start their fx one after another.
// this sets time between the letters
timing:50,

//duration of each fx
// options the same as css property for transition-duration ("1ms", "1s", etc)
fx_duration:"1s",


// stabile dimensions
// stabilize:true,

// sort callback for custom sorting elements
sort:function($letters){ return $letters; },


// Callback when letter is done animating. Runs after each letter
onLetterComplete:function($letter, $element, LetterFXObj){},

// Runs after all are done.
onElementComplete:function($element, LetterFXObj){},


// what to do when a letter completes its animation.
// options include
//restore: return letter to plain text (default)
//destroy: get rid of the letter.
//stay: leave it as is.
//rewind: reverse the animation
letter_end:"restore",


// what to do when the entire element has completed all its letter effects
// options include:
//restore: return element to its pre-fx state (default)
//stay: do nothing
//destroy: get rid of the element... FOREVER
element_end:"restore",

// Restore container element back to original state.
// options: true, false, "element" ("element" waits until all letters complete fx before restoring)
restore:true,

// destroy element/letters after fx, useful on {out:true} fx
// options: true, false, "letters" ("letters" destroys each letter after fx, but elements original content may be restored after all letters complete fx)
destroy:false,

// default class for injected elements
element_class:'letterfx',

// placeholder values that are calculated on launch
css:{
element:{ base:'', before:'', after:''},
letters:{ base:'', before:'', after:''}
}
});

Change log:

v1.0.2 (2014-04-17)

• fixed 'element_end:restore' to remove all letterfx relics
• prune css

---

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