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 |
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"|"stay"|"destroy"|"rewind" | "restore" |
| element_end |
What to do when all letters complete their effect.
|
"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" |
Creating your own letterfx is an easy process:
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;
}
Create the after class.
Prefix your fx with letterfx- and suffix it with -after.
.letterfx-myfx-after{
left:10px;
}
Optional: add temporary styles to the element which contains the letters.
.letterfx-myfx-container
{
overflow:hidden;
}
Optional: add styles which apply to both -before and -after the fx.
.letterfx-myfx-container .letterfx
{
position:relative;
}
In your JavaScript, call your new fx.
$("selector").letterfx({fx:'myfx'})
Project Hosted on GitHub