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

HTML5 Solutions: Essential Techniques for HTML5 Developers

Essential Techniques for HTML5 Developers

This book provides a collection of solutions to all of the most common HTML5 problems. Every solution contains sample code that is production-ready and can be applied to any project.

Click Here

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

Web Design Sections

Eloquent JavaScript: A Modern Introduction to Programming

Eloquent JavaScript

Eloquent JavaScript Eloquent JavaScript goes beyond the cut-and-paste scripts of the recipe books and teaches you to write code that's elegant and effective. You'll start with the basics of programming, and learn to use variables, control structures, functions, and data structures. Then you'll dive into the real JavaScript artistry: higher-order functions, closures, and object-oriented programming.

Reader Anthony says, "This book is not your typical Javascript book. Others have a utilitarian approach. In stark contrast, Eloquent JavaScript does not merely provide you a checklist of things to learn but rather paints a panorama of the possibilities that programming provides. Javascript is merely the tool used to introduce these to the reader.

Click here for more information.

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