Retro Text Animations In Pure JavaScript - textbanner.js

File Size: 3.76 KB
Views Total: 1721
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Retro Text Animations In Pure JavaScript - textbanner.js

textbanner.js is a lightweight jQuery plugin that animates your text letter by letter with configurable animation speed and growth size just like the retro text banner effect.

Installation:

$ npm install textbanner

How to use it:

1. Just include the JavaScript file textbanner.js after jQuery library and the textBanner plugin is ready for use.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="textbanner.js"></script>

2. Wrap the text you want to animate in a container element with an unique ID.

<h1 id="demo">jQuery textbanner Demo</h1>

3. Animate the text with default options.

$('#demo').textbanner();

4. Specify how many times you want to cycle through the text animation.

$('#demo').textbanner({
  cycles:3
});

5. Specify the animation speed.

$('#demo').textbanner({

  // "slow", "intermediate", "fast", as well as numerical values
  speed: "intermediate"
  
});

6. Set the growth size.

$('#demo').textbanner({

  // default: 120
  growth: 150

});

This awesome jQuery plugin is developed by michaeldfaber. For more Advanced Usages, please check the demo page or visit the official website.