Javascript / CSS Crossfader

By Timothy Groves on Jun 4, 2007

General

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!

Notes

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


CSS

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


Head

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


Body

Paste this code into the BODY section of your HTML document


Comments

Blog comments powered by Disqus