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


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

I thought this was going to be a really useful tool for my web-site, providing a rotating news box.[br /][br /]It worked fine but I applied styles from my main stylesheet to the text within the CF elements as the general notes says you can and the text changed to the correct size, weight, etc. but it was heavily pixilated - it looked about 25 ppi, not the normal 72.[br /][br /]Any ideas what the problem might be?[br /][br /]Many thanks, Derek.

Derek Jun 17, 2007