Easy Java Script Fading Text Banner Code
By Stephen Bucaro
If your banner is static, it can easily be overlooked by your web site's visitors.
Any type of animation can draw a visitor's eye to your message. One type of animation
is the fade. With only a few lines of java script code you can create a fading text banner.
In this article, I'll provide you with easy code for a fading text banner. Then
I'll provide you with easy code for a fading text banner where several different
messages fade in and out. And, as a bonus, I'll also provide you with code to do the
same fading effect with an image banner.
First, let's do a basic example. Shown below is the html code for a div element
which contains a paragraph element that displays the text "This is My Banner Text".
Paste this code into the body section of your webpage.
<div id="banfade" style="display:inline; width:468px; height:60px; border-style:solid; border-color:black; border-width:2px; color:#000000">
<p align="center" style="font-family:verdana; font-size:26px; font-weight:bold; margin-top:10px;">This is My Banner Text</p>
Note that I applied a bunch of inline style rules to both elements. If you're familiar
with the use of cascading style sheets, then you know that you can place these rules in
an embedded style block or in a linked style sheet. If you're not familiar with the use of
cascading style rules, just keep the inline style rules.
Unfortunately, I don't have space in this article to explain cascading style sheets in
detail, but, among other things, the style rules define a standard 468 x 60 pixel
banner that flows with the other text and html elements on your webpage.
Now we need a java script function to make the text fade. Paste the java script code
block shown below into the head section of your webpage.
var arColor = ["#000000","#404040","#808080","#c0c0c0","#ffffff"];
var i = 0;
if(i == arColor.length - 1) i = 0;
document.getElementById("banfade").style.color = arColor[i];
The first line in the code defines an array which contains five elements. Each array
element is a different color specified in hexadecimal format. Unfortunately, I don't
have space in this article to explain hexadecimal color format in detail, but the
first element in the array contains hexadecimal code for the color black, the last
element in the array contains hexadecimal code for the color white.