Javascript / CSS Crossfader | JavaScriptSource

Javascript / CSS Crossfader

Timothy Groves 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

Leave a Response


Hi! Is there a way to get this to show up and scroll in main window? not a separate window. I would like to put this into a website so it will scroll through the info on the different "cf"s without having a separate window come up... Please let me know... Thanks! -L

Lyn Apr 3, 2012

You need to submit your question to the [a href=""]JavaScript Forum[/a].

Lee Jul 10, 2007

John,[br /][br /]Not sure what the problem is as it works on two of my machines.

Lee Jul 10, 2007

This is *very* cool! I was wondering if you had pointers on how to have this script on execute a fade once and not continously. Also, I'd like to have this effect executed only once per user session; so if a user revisits the page, only the the final image is displayed (with no fading effect).[br /][br /]Cheers![br /][br /]Mark

Mark Jun 28, 2007

This cross fade appears to do nothing in Firefox - at least, not on my PC

John Bellringer Jun 17, 2007