jQuery & CSS3 Based Text Animation Effect Plugin - LetterFX
File Size: | 34.7 KB |
---|---|
Views Total: | 6627 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.