Attention Getting Headline Fades In And Out

Last week, I needed something for one of our sites that would attract attention to a special ad. The previous version of the ad was getting far too few click-throughs.

The headline needed to be noticed among other page items vying for the site visitor's attention. Yet, I did not want the ad to be annoying like blinking text can be.

For information articles, it may not be as critical. But for ads, if the headline isn't seen, the ad itself isn't seen.

When the ad isn't seen, the response is zero.

I thought about it for a while. Then, I decided a headline that fades in and out would fit my needs.

This article contains the instructions, code, and working example for a headline fader.

The technique uses CSS, HTML, and JavaScript. No images. Also, no Flash or any other such fancy stuff is required.

Here is an example.

Below is the complete source code for that example. The code contains three sections:

1. The CSS style
2. The ad content.
3. The JavaScript.

Each section is addressed following the source code.

The source code is complete, ready to copy and paste into a test web page. Once pasted into the test page, modifications can be made and tested.

<!-- 
     This code is complete with the three section required.
       1. The CSS style.
       2. The ad content.
       3. The JavaScript.
-->

<!-- Here is the CSS style. -->
<style style type="text/css">
.attentionclass {
	width:250px; 
	border:1px solid black;
	text-align:center; 
	padding:10px 0 10px 0; 
	background-color:#FFFFFF; 
	color:#000000
	}
</style>


<!-- Here is the ad content. -->
<div id="attentionid" class="attentionclass">
<div style="font-size:25px; font-weight:bold; line-height:28px;">
5 Secret<br />Tibetan Exercises
</div>
<div style="font-size:14px; font-weight:bold; margin-top:5px; color:#000000;">
100% money back guarantee!
</div>
<div style="font-size:16px; font-weight:bold; color:#0000FF;">
<a href="http://willmaster.fiverites.hop.clickbank.net/?tid=XMPL" style="text-decoration: none;"><span id="clickid">Click <u>here</u> now!</span></a>
</div>
</div>


<!-- Here is the JavaScript. -->
<script type="text/javascript" language="JavaScript"><!--
/*
Text Fade In/Out (Website Secrets Version)
Version 1.0
March 1, 2009
Will Bontrager
https://www.willmaster.com/
Copyright 2009 Bontrager Connection, LLC
*/

// Three places to customize --

// Place One:
// Between the quotes, specify the id value of the div 
//   or other container with text to fade in/out.
var ContainerID = "attentionid";

// Place Two:
// In the color mask, put an 0 for the color digits that will 
//   change and otherwise for digits that will remain static.
var ColorMask = "#00FF00";

// Place Three:
// Specify the number of milliseconds to wait between each 
//  fade in/out step.
var FadePause = 225;

/*************************************/
// No further customizations required.
var numlist = "0123456789ABCDEF".split("");
var pointer = 15;
var direction = 'up';
var counter = 0;
var MaxChanges = 0;
if( FadePause < 1 ) { FadePause = 1; }
function FadeColorInOut() {
if( pointer == 15 ) { direction = 'down'; }
else if( pointer == 0 ) { direction = 'up'; }
if( direction == 'up' ) { pointer++; }
else { pointer--; }
counter++;
if( MaxChanges > 0 && counter > MaxChanges ) { clearInterval(Changing); }
re = /0/g;
var thiscolor = ColorMask.replace(re,numlist[pointer]);
document.getElementById(ContainerID).style.color = thiscolor;
}
setInterval("FadeColorInOut()",FadePause);
//--></script>

Customizing the Text Fade

The CSS style section —

The CSS defines the style for the div within which the ad is located. Feel free to define any style you wish.

The example specifies a width of 250 pixels, a border, text alignment, some padding, and colors for both the background and the text.

When specifying the text color, consider that a few browsers have JavaScript disabled. For those, the color you specify will not be changed by the Text Fade In/Out JavaScript.

The ad content section —

When the JavaScript runs, all text in the ad content div will fade in and out, with an exception: Text with a text color style that overrides the ad content div's style.

If any text in the div must not fade in and out, specify a color for it.

In the example, the "5 Secret Tibetan Exercises" headline does not have a separate color style. That headline fades in and out.

The guarantee line and the link line, on the other hand, both have a separate color specified, black and blue, respectively.

The content can be anything you want. Just remember that all text in the div will fade in and out unless it has a color style overriding the ad div's style. The above example code shows one way to do that.

The JavaScript section —

The JavaScript has three places to customize. Each is marked in the source code.

1. The ad content div id.

   The div containing the ad content fading headline has an id="attentionid" attribute. "attentionid" is the div's ID.

   In the JavaScript, give variable ContainerID the value that is the div's ID.

   If the div's ID is changed, change the value in the JavaScript.

2. The color mask.

   The color mask tells the Text Fade In/Out JavaScript what color to fade. The variable ColorMask may be assigned any one of the following values.

   "#0000FF"
   "#00FF00"
   "#FF0000"
   "#FF00FF"
   "#FFFF00"
   "#00FFFF"
   "#000000"
   

   Those are blue, green, red, purple, yellow, aqua, and black, respectively.

   If you are adept at editing JavaScript code, you can assign other colors. The Text Fade In/Out JavaScript will increment and decrement each hex digit 0 during the fading in and out. The rest of the hex digits remain as they are.

3. The fading speed.

   The variable FadePause is assigned a number equalling the number of milliseconds to pause between each increment and decrement of a color fade. (There are 15 increments during each fade out and 15 decrements during each fade in.)

   The example is 225 milliseconds. Any number larger than zero may be assigned.

After customizing and before going live, try it on a test page.

More Functionality

After developing the technique and making notes for this article, I decided I want additional functionality. Specifically, I wanted to rotate headlines and I wanted to rotate colors.

The code got more complex, harder to customize. So, I made a generator for it. The generator is a WebSite's Secret exclusive.

Here is an example of 7 rotating headlines and 4 rotating colors, each headline fading in and then out.

If you are a WebSite's Secret member, you have access to a special generator to quickly and easily generate your custom ads with attention-getting fading headlines and colors. The above is an example.

To use the generator, fill in the form and click a button. Copy the generated code and paste it directly into your web page. Use the generator as often as you like.

Whether or not you are a WebSite's Secret member, you now have the means to make fading headline ads to attract attention without being annoying like blinking text can be.

Will Bontrager