jQuery Text Animation

by Damian Szewczyk (netkevin)
damian.szewczyk@gmail.com
Version 1.0
Text Animation plugin lets you to add to any text specified text animations. Currently those are: random_explosion, random_implosion, sinusoid, twitching, mouseover_escape, shuffle.
Just choose a container with a text and fire "netkevin_text_animation" on it with chosen animation method and animation settings.
General usage: $(selector).netkevin_text_animation(method_name, [settings]);
Example usage: $("#div_with_text").netkevin_text_animation("random_explosion", { timer: 2000, font_start: '12px', font_end: '56px', fade_out: true, radius: 300 });

Currently available 6 text animation effects. More to come soon!

Write to me with your ideas for text animations - those will be done! (if possible)

When you click "Fire effect", the code used for animation appears below.

Random explosion

The characters explode in random directions for radius set (font size can be changed too)
Settings
Animation time animation duration (in miliseconds)
Font start font size when animation starts
Font end font size when animation ends
Fade out should animated characters fade out (true)
Radius the explosion radius - how far the characters will explode (in px)
 
Random explosion

Random implosion

The characters implode to a straight text from random directions from radius set (font size can be changed too)
Settings
Animation time animation duration (in miliseconds)
Font start font size when animation starts
Font end font size when animation ends
Radius the explosion radius - how far the characters will explode (in px)
 
Random implosion

Sinusoid

The characters form a sinusoid. There can be continous animation of "waving" sinusoid
Settings
Animation time animation duration (in miliseconds)
Height the height of sinusoid (in px)
Width proportion the proportional width, comparing to current text width (ie. 2 means that the sinusoid will be 2 times wider)
Sinus width the sinus function width (the full sinusoid is for 2*Math.PI, but can be wider or narrower)
Continous animation if true, the animation will be continues (changing from sinus to cosinus)
 
Great sinusoidal text - math rulez;)

Twitching

The characters are moving out from their positions and go back (can be random or set). Can be continous animation or repeated number of times
Settings
Animation time animation duration (in miliseconds)
Horizontal shift the maximum horizontal shift for single character (in px) (or top position for random=false)
Vertical shift the maximum vertical shift for single character (in px) (or left position for random=false)
Repeat how many times repeat the animation, 0 - neverending
Random Random shift or every letter behaves the same
 
Twitching text

Mouse over escape

Characters escaping after mouseover
Settings
Animation time animation duration (in miliseconds)
Horizontal shift the maximum horizontal shift for single character (in px) (or top position for random=false)
Vertical shift the maximum vertical shift for single character (in px) (or left position for random=false)
Random if true, the shifts are random, if false the shifts are set (top and left CSS position)
 
Fire effect and put mouse cursor over the text

Shuffle

Characters in the text are shuffled
Settings
Animation time animation duration (in miliseconds)
 
Click fire to shuffle the text