Flashing JavaScript Text

Flashing JavaScript Text

27th January 2008 - 2 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.

JavaScript
colour

Add new comment

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

Related Content

Creating A Mouse "Looking" Script With JavaScript

24th November 2024

I've seen lots of "our team" pages over the years, but one of the ones that stood out to me the most were those that had an interactive element to them. For me, it adds a bit of personality to the page and makes it feel more alive than a bunch of silhouettes of the directors.

Read more

Generating Colour Palettes From Images In PHP

4th August 2024

A common web design pattern is to incorporate an image into the design of the page. This creates a tighter integration with the image and the rest of the page.

The main issue in designing a page around the image is that the colours of the page must match the image. Otherwise this creates a dissonance between the image and the styles of the site.

Read more

Creating A Simple Pie Chart With CSS

25th December 2022

A pie chart is a great way of showing the relationship between numbers, especially when showing percentages. Drawing a pie chart from scratch takes a fair amount of maths to get working and so people usually go for third party charting libraries in order to add charts to the page.

Read more