In this article you learn how to create a fading text banner, a fading text banner with several different messages that fade in and out, and a fading image banner with several different image banners that fade in and out. You also learn how to use the document.write method so that you can give a link to others to include your banners in their webpage.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Easy Java Script Fading Text Banner Code

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.

<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);

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.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268