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 text animation on your web pages. You only need to specify the div or paragraph that needs to be animated in the jQuery code.

Just a 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.

Developer page Download plug-in

Install and use 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:


A demo of text animation with default settings

In this example, only the plug-in is initialized with the div element that contains the 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:

<div id="animate-text-example">Animating text with default settings</div>

The script:




An example of using cycles and growth options

By using the cycles parameters, you may limit the number of times the animation should loop from 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 the current letter will be bigger. See for better understanding:

jQuery text animation growth

Complete code:

<!DOCTYPE html>
   <link href='https://fonts.googleapis.com/css?family=Spirax' rel='stylesheet' type='text/css'>
    font-weight: 700;

<div id="animate-text-example">Animating text cycles and growth</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="js/jquery-textbanner/textbanner.js"></script>
            growth: 250

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:

The code:



    growth: 400,

    speed: "100"