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

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

Add new comment

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

Related Content

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

Getting Up And Running With Nightwatch.js

24th July 2022

Nightwatch.js is an end to end testing framework, written in JavaScript. It can be used to test websites and applications and uses the W3C WebDriver API to drive modern browsers to perform the tests.

In this article I will look at setting up Nightwatch.js in a project and getting started with writing tests.

Read more

Creating Presentations In Markdown With Marp

15th May 2022

Marp or Markdown Presentation Ecosystem is a collection of tools that allows the generation of presentations of different formats from a markdown template. The tools are written in JavaScript and have a number of options that allow presentations of different styles and formats.

Read more

Creating A Reading Progress Bar In JavaScript

9th January 2022

Adding a progress bar to the top of the page is a simple way of showing the user how far down the page they have read. There is a scroll bar on the right hand side of the page on my current device, but that isn't always present on all devices.

Read more

Animating Number Updates With jQuery

5th December 2021

I was working on a user dashboard recently and decided to add some more signposting to values being updated.  Users were able to select different parameters in order to produce different values, but I thought that the values being updated weren't clear enough.

Read more