JS Tutorial
- Overview
- Documents
LetterFx is 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.
Source: tuxsudo.com
1. INCLUDE JS FILES
<script src="http://code.jquery.com/jquery.min.js"></script> <script src="jquery-letterfx.js"></script>
2. HTML
<p class="tagline">A jQuery plugin to apply animated visual effects to text - letters, words & custom patterns.</p>
3. JAVASCRIPT
$(".tagline").letterfx({"fx":"smear","letter_end":"rewind"});
4. OPTIONS
| 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 replacementstring. | "span" |
5. EFFECTS
Effects can be combined with the exception of transform-based and some position-based effects.
spin: Spin letters round and round.
fade: Fade letters in or out.
grow: Grow (or shrink) letters from tiny to normal font-size.
smear: Smear the letters in or out. Adjust text-shadow color for best results.
fall: Fall letters into our out of place.
swirl: Swirl letters into our out of place. Pre-built combination of fall and spin effects.
wave: Make your letters do the wave. Best used with letter_end:"rewind" option.
fly-top: Fly letters in out from the top.
fly-bottom: Fly letters in out from the bottom.
fly-left: Fly letters in out from the left.
fly-right: Fly letters in out from the right.
