Configurable Fading Animations For Text - jQuery TextFade
| File Size: | 23.5 KB |
|---|---|
| Views Total: | 1192 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
TextFade is a lightweight jQuery text animation plugin which shows and hides text with random or sequential fade in and fade out animations.
How to use it:
1. Insert the minified version of the jQuery TextFade plugin after jQuery library (slim build).
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous">
</script>
<script src="jquery-textfade.min.js"></script>
2. The JavaScript to fade in or fade out text you specify.
jQuery.textFade(in, {
text: 'text here'
});
jQuery.textFade(out, {
text: 'text here'
});
// or
jQuery.textFadeIn({
text: 'text here'
})
jQuery.textFadeOut({
text: 'text here'
}):
3. Config the fading effect with the following options.
jQuery.textFade(in, {
// text to animate
'text': 'text here',
// ltr_ttb: left-to-right character, top-to-bottom line
// ltr_btt: left-to-right character, bottom-to-top line
// rtl_ttb: right-to-left character, top-to-bottom line
// rtl_btt: right-to-left character, bottom-to-top line
// ttb_ltr: top-to-bottom character, left-to-right line
// ttb_rtl: top-to-bottom character, right-to-left line
// btt_ltr: bottom-to-top character, left-to-right line
'sequence': 'random',
'steps': {
'duration': 10, // in milliseconds
'threads': 1 // the amount of character replacements
}
});
4. Events available.
var instance = jQuery.textFade(action, option);
instance.on("start.textFadeIn", function() {
// ...
});
instance.on("stop.textFadeIn", function() {
// ...
});
instance.on("start.textFadeIn", function() {
// ...
});
instance.on("stop.textFadeOut", function() {
// ...
});
instance.on("start.textFade", function() {
// ...
});
instance.on("stop.textFade", function() {
// ...
});
This awesome jQuery plugin is developed by mdesantis. For more Advanced Usages, please check the demo page or visit the official website.











