Javascript / CSS Crossfader

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

Created by: Timothy Groves
Web Site: http://www.brandspankingnew.net/
Posted: June 4, 2007

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

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Timothy Groves | http://www.brandspankingnew.net/ */
var useBSNns;

if (useBSNns) {
	 if (typeof(bsn) == "undefined")
		  bsn = {}
	   var _bsn = bsn;
} else {
	  var _bsn = this;
}

_bsn.Crossfader = function (divs, fadetime, delay ) {	
	 this.nAct = -1;
	 this.aDivs = divs;
	
	 for (var i=0;i<divs.length;i++) {
	   document.getElementById(divs[i]).style.opacity = 0;
   	document.getElementById(divs[i]).style.position = "absolute";
	   document.getElementById(divs[i]).style.filter = "alpha(opacity=0)";
 	  document.getElementById(divs[i]).style.visibility = "hidden";
	 }
	
	 this.nDur = fadetime;
  this.nDelay = delay;
  this._newfade();
}

_bsn.Crossfader.prototype._newfade = function() {
  if (this.nID1)
    clearInterval(this.nID1);
	   this.nOldAct = this.nAct;
    this.nAct++;

 	if (!this.aDivs[this.nAct])	this.nAct = 0;

 	if (this.nAct == this.nOldAct)
    return false;

  document.getElementById( this.aDivs[this.nAct] ).style.visibility = "visible";
  this.nInt = 50;
  this.nTime = 0;
  var p=this;
  this.nID2 = setInterval(function() { p._fade() }, this.nInt);
}

_bsn.Crossfader.prototype._fade = function() {
  this.nTime += this.nInt;
 	var ieop = Math.round( this._easeInOut(this.nTime, 0, 1, this.nDur) * 100 );
 	var op = ieop / 100;
 	document.getElementById( this.aDivs[this.nAct] ).style.opacity = op;
 	document.getElementById( this.aDivs[this.nAct] ).style.filter = "alpha(opacity="+ieop+")";

  if (this.nOldAct > -1) {
    document.getElementById( this.aDivs[this.nOldAct] ).style.opacity = 1 - op;
  		document.getElementById( this.aDivs[this.nOldAct] ).style.filter = "alpha(opacity="+(100 - ieop)+")";
	 }
	
	 if (this.nTime == this.nDur) {
		  clearInterval( this.nID2 );
		
  if (this.nOldAct > -1)
	   document.getElementById( this.aDivs[this.nOldAct] ).style.visibility = "hidden";	
    var p=this;
    this.nID1 = setInterval(function() { p._newfade() }, this.nDelay);
  }
}

_bsn.Crossfader.prototype._easeInOut = function(t,b,c,d) {
  return c/2 * (1 - Math.cos(Math.PI*t/d)) + b;
}

CSS

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

div.cf_wrapper {
  position: relative;
  left: 30%;
}
	
div.cf_element {
		width: 400px;
		background-color: #eee;
		border: 1px solid #ccc;
}
	
div.cf_element div.content {
		padding: 10px;
}

div.cf_element div.content h3 {
		padding-top: 0;
		margin-top: 0;
}

Head

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


<script type="text/javascript" src="crossFader.js"></script>

Body

Paste this code into the BODY section of your HTML document


<div class="cf_wrapper">

		<div class="cf_element" id="cf1">
			<div class="content">
				<h3>Element 1</h3>
				<p>Quod mazim placerat facer possim assum typi non habent claritatem. Demonstraverunt lectores legere me lius, quod ii <a href="#">legunt saepius claritas</a> est etiam processus dynamicus qui.</p>
			</div>
		</div>

		<div class="cf_element" id="cf2">
			<div class="content">
				<h3>Element 2</h3>
				<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua <strong>franca va esser</strong> plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A <em>un Angleso it va semblar un</em> simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</p>
			</div>
		</div>

		<div class="cf_element" id="cf3">
		<div class="content">
				<h3>Element 3</h3>
<p style="text-align: center;">
<img src="butterfly.gif" width="200" height="150"><br>
Iis qui facit eorum claritatem Investigationes demonstraverunt lectores legere me. Usus legentis in lius quod ii legunt saepius claritas est etiam processus dynamicus qui. <a href="#">Littera gothica quam!</a></p>
			</div>
		</div>

</div>

<script type="text/javascript">
<!--
	 var cf = new Crossfader( new Array('cf1','cf2','cf3'), 500, 2000 );
-->
</script>

Leave a Response

(7 comments)

You need to submit your question to the [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]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 2.0.0.4 - 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

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details