LetterFx jQuery Plugin

A jQuery plugin to apply animated visual effects to text - letters, words & custom patterns.

LetterFx works by temporarily injecting markup into the text of an $("element") and sequentially adding & removing transition-based CSS classes.

Please use responsibly.

demo:

Option Description Possible Values Default Value
fx 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.
See the effects section for more info.
'spin fly-top'
backwards

Effects can happen 'in' or 'out' (eg fade-in vs. fade-out). The default direction for all effects is 'in'.

Change "backwards" to true to play the effect(s) backwards thus switching the direction to 'out.'

true|false false
timing The time (in ms) to wait between launching each letter's effect(s). Any time (in ms) greater than 0. 50
fx_duration The length of the effects for each CSS transition. Any valid value for the CSS transition-duration property (eg: "300ms" or "2s"). "1s"
word Switches default pattern from letter mode to word mode. true|false false
letter_end

What to do when the letter is done with its effect.

"restore" restores letter wih its text.

"stay" leaves the letter as is.

"destroy" gets rid of the letter.

"rewind" animates back to its initial state.

"restore"|"stay"|"destroy"|"rewind" "restore"
element_end

What to do when all letters complete their effect.

"restore" restores element to its original state.

"stay" leaves the element as is.

"destroy" gets rid of the element.

"restore"|"stay"|"destroy" "restore"
sort A sorting function through which to run all matched letters. Any valid function that accepts and returns a jQuery collection. function($letters){ return $letters; }
onLetterComplete A callback function to run whenever a letter finishes its transition. Any valid function. function($letter, $element, LetterFXObj){}
onElementComplete A callback function to run after all transitions have been run. Any valid function. function($element, LetterFXObj){}
pattern A capturing regular expression used to replace plain text characters with injected HTML clones of them Any valid RegExp pattern match each letter, number & character:
/(\S)/gi
replacement The replacement part of the RegExp pattern. Any valid replacement string "<span>$1</span>"
selector The tag slector of the injected HTML element. It must match the tag defined in the replacement string. Any valid HTML tag that matches the replacement string. "span"

Effects can be combined with the exception of transform-based and some position-based effects.

spin

Spin letters round and round.

demo: in

fade

Fade letters in or out.

demo: in out

grow

Grow (or shrink) letters from tiny to normal font-size.

demo: in out

smear

Smear the letters in or out. Adjust text-shadow color for best results.

demo: in out

fall

Fall letters into our out of place.

demo: in out

swirl

Swirl letters into our out of place. Pre-built combination of fall and spin effects.

demo: in out

wave

Make your letters do the wave. Best used with letter_end:"rewind" option.

demo: in out

fly-top

Fly letters in out from the top.

demo: in out

fly-bottom

Fly letters in out from the bottom.

demo: in out

fly-left

Fly letters in out from the left.

demo: in out

fly-right

Fly letters in out from the right.

demo: in out

Creating your own letterfx is an easy process:

  1. For your custom letterfx (we'll call it myfx), create the before class.

    Prefix your fx with letterfx- and suffix it with -before.

    .letterfx-myfx-before{
        left:0;
    }
    
  2. Create the after class.

    Prefix your fx with letterfx- and suffix it with -after.

    .letterfx-myfx-after{
        left:10px;
    }
    
  3. Optional: add temporary styles to the element which contains the letters.

    .letterfx-myfx-container
    {
        overflow:hidden;
    }
    
  4. Optional: add styles which apply to both -before and -after the fx.

    .letterfx-myfx-container .letterfx
    {
        position:relative;
    }
    
  5. In your JavaScript, call your new fx.

    $("selector").letterfx({fx:'myfx'})
    

try it!

FX
FX Direction
Timing & Duration
Letter End
Element End
{}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus lectus et dolor pretium placerat.

Project Hosted on GitHub