Easy 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>
</div>

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.

<script type="text/javascript">
var arColor = ["#000000","#404040","#808080","#c0c0c0","#ffffff"];
var i = 0;

function fadeText()
{
  if(i == arColor.length - 1) i = 0;
  else i++;
  document.getElementById("banfade").style.color = arColor[i];
}

setInterval("fadeText()", 1000);
</script>

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.

 General Web Design
 HTML
 Graphics Design
 CSS Quick Reference
 Easy Cascading Style Sheets
 Java Script Quick Reference
 Easy Java Script Code
 Web Design Tools
 Coding Issues

RSS Feed