jQuery & CSS3 Based Text Animation Effect Plugin - LetterFX

File Size: 34.7 KB
Views Total: 6511
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


5. Available options.

// 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

// switch from letter FX to word FX.

// 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.

// defaults to injecting spans, can be any inline element

//selector -- should match replacement above

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

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

// 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

// 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

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

// 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)

// default class for injected elements

// placeholder values that are calculated on launch
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.