Flashing JavaScript Text

Flashing JavaScript Text

27th January 2008 - 3 minutes read time

Here is a simple function that makes text in a tag fade into one colour slowly before quickly fading back into the original colour. If the background is the same colour as the text then the text will appear to fade in and out.

var colour = 0;
var dir = 1;
function fade(){
  var quick = 50;
  var slow = 100;
  var el = document.getElementById('fadeInOut');
  if(!el){
    return;
  }
 
  if(dir){
    if (colour < 255) {
      setTimeout(fade,slow);
      colour += 10;
    }else{
      setTimeout(fade,quick);
      colour = 255;
      dir = 0;
    }
  }else{
    if(colour > 0){
      setTimeout(fade,quick);
      colour -= 10;
    }else{
      setTimeout(fade,slow);
      colour = 0;
      dir = 1;
    }
  }
  el.style.colour = "rgb("+colour+","+colour+","+colour+")";
}

This code works by using a group of setTimeout function calls to call the function in a loop. Each time the function is run some variables are set, the colour is changed and then the function is called again. Use it in the following way.

<body onload="fade();">
  <div id="fadeInOut" style="font-size:100px;">Fading Text</div>
</body>

So what would you use this for? Well if you where doing something intensive on a site you could use this trick to allow the user to see that things are going on before displaying the content that they requested.

Add new comment

The content of this field is kept private and will not be shown publicly.

Related Content

Drupal 11: Finding A Better Way To Display Code Examples

18th January 2026

I've been running this site for about 18 years now and the code I post has been in much the same format since it was started. The code is rendered onto the page using a <code> element and (mostly) syntax highlighted using a JavaScript plugin.

Read more

Using Colour Schemes To Create Light And Dark Modes In CSS

31st August 2025

Allowing users to switch between light and dark colour schemes on websites is a popular feature. You can often see a small sun or moon icon that allows you to change from light mode to dark colour scheme, or visa versa. Some operating systems and user agents also have the ability to activate a dark colour scheme, which websites also pick up and use.

Read more