3 Demos of Text Animation by jQuery: textbanner

Create text animation in web pages

The textbanner is a simple to use plug-in for creating the text animation in your web pages. You only need to specify the div or paragraph that needs to be animated in the jQuery code.

Just the single line of code will create the animation with default settings while you may set the speed, cycles, and growth by using the options as initiating the plug-in.

Demo1 Demo2 Demo3
Developer page Download plug-in

Install and using the textbanner plug-in

You may install the textbanner plug-in via npm:

> npm install textbanner

Or download the copy from above link and include the textbanner.js file:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>

<script src=”js/jquery-textbanner/textbanner.js”></script>

Initiate the plug-in where you will specify the text element to be animated:

$(‘#text-animation-demo’).textbanner();

A demo of text animation with default settings

In this example, only the plug-in is initialized with the div element that contains desired text to be animated. No options are given, so default settings will be used:

jQuery text animation

See online demo and code

The markup:

 

The script:

 

A demo of using cycles and growth options

By using the cycles parameters, you may limit the number of times the animation should loop fro the first character to the last of the specified element.

See this demo where cycles and growth options are used. The more the value of the growth, the animation of current letter will be bigger. See for better understanding:

jQuery text animation growth

See online demo and code

The script:

 

Controlling the speed option

You may control the speed of the text animation by using the speed parameter. Provide the value as:

  • Fast
  • Slow
  • Intermediate
  • Or time in milliseconds e.g. speed: “100”

In this demo, the speed parameter is used along with the growth and cycles parameters. Have a look:

See online demo and code

The code:

Get the complete code from the demo page.