jQuery Plugin For Retro Animated Headline Text - Textbanner

File Size: 6.38 KB
Views Total: 2828
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Retro Animated Headline Text - Textbanner

Textbanner is a jQuery plugin for a retro text banner animation that has the ability to animate the text character by character with the support of infinite loop and custom animation speed. Ideal for creating eye-catching headline text.

Installation:

# NPM
$ npm install textbanner --save

How to use it:

1. Insert jQuery JavaScript library and the jQuery TextBanner plugin's script textbanner.js in the document.

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

2. Just call the function on the target text container and done.

<h1 id="textbanner">Hello World!</h1>
$('#textbanner').textbanner();

3. Set the growth and step values (in terms of percentage of parent element font-size).

//defaults to 120%
var growth = 120;

4. Set the number of cycles.

// defaults to infinite loop
var cycles = -1;

5. Set the animation speed in milliseconds.

// defaults to 100ms
var speed = 100;

Changelog:

2022-01-23

  • fixes for use in React

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