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
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 the desired text to be animated. No options are given, so default settings will be used:
See online demo and code
The markup:
<div id="animate-text-example">Animating text with default settings</div>
The script:
<script>
$('#animate-text-example').textbanner();
</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:
Complete code:
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Spirax' rel='stylesheet' type='text/css'>
<style>
#animate-text-example{
font-family:'Spirax';
font-weight: 700;
font-size:38px;
}
</style>
</head>
<body>
<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>
<script>
$('#animate-text-example').textbanner({
cycles:2,
growth: 250
});
</script>
</body>
</html>
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:
$('#animate-text-example').textbanner({
cycles:4,
growth: 400,
speed: "100"
});