Javascript / CSS Crossfader

By Timothy Groves on Jun 4, 2007


This script produces a fading effect in a text box. The text can include any type of HTML and CSS styling. It can also be used with graphics. Small but powerful!

See how it looks!


The constructor, placed after the content, takes three variables: an array containing the ids of the divs to be faded, the fade time (in milliseconds), and the delay between fades (also in milliseconds):

var cf = new Crossfader( new Array('cf1','cf2','cf3'), 500, 2000 );

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: crossFader.js


Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.


Paste this code into the HEAD section of your HTML document.


Paste this code into the BODY section of your HTML document