The JavaScript Source: CSS : Javascript / CSS Crossfader

Browse Doc JS's Tips!

Promotions

Free Announcements

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://javascript.internet.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>

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

7. From: Mark
06/29/2007 00:59:16

4. From: Derek
JavaScript CSS Crossfader
06/17/2007 17:07:55

5. From: Lee (Admin)
07/10/2007 15:41:46

2. From: John Bellringer
06/17/2007 06:22:44

3. From: Lee (Admin)
07/10/2007 15:41:12

6. From: Gene Wilkins
CSS Crossfader
06/15/2007 15:27:49

1. From: Wutthichai
06/10/2007 23:08:33

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

7. From: Mark06/29/2007 00:59:16

4. From: DerekJavaScript CSS Crossfader06/17/2007 17:07:55

5. From: Lee (Admin)07/10/2007 15:41:46

2. From: John Bellringer06/17/2007 06:22:44

3. From: Lee (Admin)07/10/2007 15:41:12

6. From: Gene WilkinsCSS Crossfader06/15/2007 15:27:49

1. From: Wutthichai06/10/2007 23:08:33

7. From: Mark
06/29/2007 00:59:16

4. From: Derek
JavaScript CSS Crossfader
06/17/2007 17:07:55

5. From: Lee (Admin)
07/10/2007 15:41:46

2. From: John Bellringer
06/17/2007 06:22:44

3. From: Lee (Admin)
07/10/2007 15:41:12

6. From: Gene Wilkins
CSS Crossfader
06/15/2007 15:27:49

1. From: Wutthichai
06/10/2007 23:08:33