Expanding and Shrinking Text Banner

Get your visitor's attention with an animated text banner. With this script you supply an array of text entries that are to be displayed in the banner area. Each will be displayed in turn effectively starting with zero size and growing until it reaches your specified maximum fiont size. It will then remain displayed for a set period before shrinking back down to zero size and being replaced by the next entry from the array (wrapping back to the start of the array automatically once the end of the array is reached).

Getting this effect on your web page is extremely simple. First copy the following and attach it into your web page immediately before the </body> tag.

JavaScript

// Expanding and shrinking text banner Javascript
// copyright 24th July 2005, 24th January 2013 by Stephen Chapman
// www.felgall.com
// permission to use this Javascript on your web page is granted
// provided that this copyright notice is included

(function(msgArray,speed,cdel,maxfont,b) {"use strict";var x,y,d,msg,bnr;x=y=0;d=document.getElementById(b);d.style.textAlign='center';d.style.Math.floor(maxfont*1.4)+'px';bnr=function(dir){if(dir){msg=msgArray[y];if(x<maxfont){x++;setTimeout(function(){bnr(1)},speed);}else setTimeout(function(){bnr(0)},cdel);}else{if(x>1){x--;setTimeout(function(){bnr(0)},speed);}else{setTimeout(function() {bnr(1)},10);y++;if(y>=msgArray.length)y=0;}}d.innerHTML=msg;d.style.fontSize=x+'px'};bnr(1);
})([
// comma separated list of the text for your banner goes here
"Get your Visitor's Attention",
"with an animated text banner",
"each line grows and shrinks",
"and is then replaced with the next",
"and continues to cycle through",
"for as long as your visitor is on the page"
],
50,   // speed for shrinking and growing
1500, // delay at full size 
25,   // max font size in pixels
'btx' // id of banner 
);

Next replace the list of text entries in the array at the end of the script with your selected text entries and if you need to adjust the speed of the animation or the maximum font size to use adjust the numbers at the bottom of the script as well. Finally add a div tag where you want the banner to be displayed in your page with an id that matches the very last entry in the script (you can change that value if you already have an id=btx" elsewhere in your page).

<div id="btx"></div>

This article written by Stephen Chapman, Felgall Pty Ltd.

Browser Problems and Cookies
JavaScript Variables and Operators
First Focus
What Javascript Can't Do.
Unobtrusive Slideshows With Optional Captions

FaceBook Follow

Twitter Follow
Tweet

Expanding and Shrinking Text Banner

Related Articles