Version: 0.1 (beta)
Author: Rick Ogden
Copyright: 2010 University of Salford (http://www.salford.ac.uk/)
License: Gnu General Public License

Download the Cross Fader MooTools Class

Here is a simple cross fading script I wrote. What it does it performs an nice “cross-fade” transition from one element to another. It can cross fade between any number of DOM elements (as an array) and will cycle through them either in order or at random.

First include the MooTools 1.2.4 Core and the Fader.js class. Then you can create a new instance of the cross fader class:

var myFader = new Fader(container, elements [, options]);

Arguments

1. container – (element) The element that is going to contain the cross fader.
2. elements – (array) The elements which are going to be cycled through
3. options – (object) extra options:
   • timer – (number) length of time (in seconds) between transitions (default: null)
   • start – (number) Which item in the array to start on (default: -1 which is random)
   • inOrder – (boolean) Whether to go through the elements in array order or by random (note: Random will mess up the previous button) (default: true)
   • nextButton – (element) Adds an event listener to this element to make it skip to the next element (default: null)
   • previousButton – (element) Similar to nextButton, but will go back to the previous item in the array (even if set to random) (default: null)
   • pauseOnMouseOver – (boolean) Whether to pause on current slide when the mouse is hovering over it (default: true)

Example

HTML:

<div id="crossfader" style="background-color: #003"><div class="slide" style="background-color: #300">First Slide</div>
<div class="slide" style="background-color: #030">This is the second slide</div>
<div class="slide" style="background-color: #003"><p>Third slide.</p><p><a href="https://www.rickogden.com">https://www.rickogden.com</a></p>
</div>

Javascript:

window.addEvent('domready',function(){
    var fader = new Fader(document.id('crossfader'), $$('.slide'),{
        timer: 5
    });
});

Result:

Other Examples/Usages

You are not limited to elements which exist on the page, these elements could be created with Javascript or even retrieved via Ajax.

Here is an implementation written by Michael Leach which is far prettier than my own examples.