The JavaScript Source: Page-Details : Fade Anything Technique

General

Need to draw attention to something new on your Web page? Only need to show it for a moment or two? This script will highlight it in a subtle manner (or boldly, if you choose).

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Notes

Created by: Adam Michela
Web Site: http://www.axentric.com/aside/fat/
Posted: December 11, 2006

Basic:

Choose the element, such as a paragraph, you would like to spotlight and give it a class of "fade":

Watch me fade

The paragraph will fade from the default color of yellow (#FFFF33) to whatever it's native background color is.

Advanced

Change the default fade from color:

<p id="paragraph1" class="fade-0066FF">Watch me fade from Blue</p>

Fade an element after the page load from a script (such as after an Ajax transaction):

Fat.fade_element("paragraph1")

The Fat.fade_element() function accepts several arguments: Target ID, Frames Per Second, Fade Duration, Fade Color, Final Color.

For example, if you wanted to fade paragraph1 from red to green at 60 frames per second for 10 seconds:

Fat.fade_element("paragraph1", 60, 10000, "#FF0000", "#00CC00")

Please note, the ID of the element is a required argument. As such all elements that you wish to fade (even by class) must have some unique ID. The ID can be anything.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: fadeAnything.js

var Fat = {
 	make_hex : function (r,g,b) {
  		r = r.toString(16); if (r.length == 1) r = '0' + r;
  		g = g.toString(16); if (g.length == 1) g = '0' + g;
  		b = b.toString(16); if (b.length == 1) b = '0' + b;
  		return "#" + r + g + b;
	 },
 	fade_all : function () {
 		 var a = document.getElementsByTagName("*");
 		 for (var i = 0; i < a.length; i++) {
 			  var o = a[i];
 			  var r = /fade-?(\w{3,6})?/.exec(o.className);
 			  if (r) {
 				   if (!r[1]) r[1] = "";
 				   if (o.id) Fat.fade_element(o.id,null,null,"#"+r[1]);
			   }
		  }
	 },
	 fade_element : function (id, fps, duration, from, to) {
  		if (!fps) fps = 30;
  		if (!duration) duration = 3000;
  		if (!from || from=="#") from = "#FFFF33";
  		if (!to) to = this.get_bgcolor(id);

  		var frames = Math.round(fps * (duration / 1000));
  		var interval = duration / frames;
  		var delay = interval;
  		var frame = 0;

  		if (from.length < 7) from += from.substr(1,3);
  		if (to.length < 7) to += to.substr(1,3);

  		var rf = parseInt(from.substr(1,2),16);
  		var gf = parseInt(from.substr(3,2),16);
  		var bf = parseInt(from.substr(5,2),16);
  		var rt = parseInt(to.substr(1,2),16);
  		var gt = parseInt(to.substr(3,2),16);
  		var bt = parseInt(to.substr(5,2),16);

  		var r,g,b,h;
  		while (frame < frames) {
   			r = Math.floor(rf * ((frames-frame)/frames) + rt * (frame/frames));
   			g = Math.floor(gf * ((frames-frame)/frames) + gt * (frame/frames));
   			b = Math.floor(bf * ((frames-frame)/frames) + bt * (frame/frames));
   			h = this.make_hex(r,g,b);

   			setTimeout("Fat.set_bgcolor('"+id+"','"+h+"')", delay);

   			frame++;
   			delay = interval * frame;
		  }
		  setTimeout("Fat.set_bgcolor('"+id+"','"+to+"')", delay);
	 },
	 set_bgcolor : function (id, c) {
		  var o = document.getElementById(id);
		  o.style.backgroundColor = c;
	 },
	 get_bgcolor : function (id) {
		  var o = document.getElementById(id);
  		while(o) {
   			var c;
   			if (window.getComputedStyle) c = window.getComputedStyle(o,null).getPropertyValue("background-color");
   			if (o.currentStyle) c = o.currentStyle.backgroundColor;
   			if ((c != "" && c != "transparent") || o.tagName == "BODY") { break; }
   			o = o.parentNode;
  		}
  		if (c == undefined || c == "" || c == "transparent") c = "#FFFFFF";
  		var rgb = c.match(/rgb\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/);
  		if (rgb) c = this.make_hex(parseInt(rgb[1]),parseInt(rgb[2]),parseInt(rgb[3]));
  		return c;
	 }
}

// Created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  Fat.fade_all();
});

Head

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


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

Body

Paste this code into the BODY section of your HTML document


<p id="paragraph1" class="fade-bfdcff">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p id="paragraph2" class="fade-fff4bf">
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.</p>
<p id="paragraph3" class="fade">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

User Comments

Add a comment, suggestion, or correction

Comments feed

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

4. From: Michael
Thanks
10/31/2008 19:44:58

2. From: Steven
11/28/2007 13:45:41

3. From: Lee (Admin)
12/04/2007 11:06:35

1. From: Kenny
01/02/2007 01:20:38

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

4. From: MichaelThanks10/31/2008 19:44:58

2. From: Steven11/28/2007 13:45:41

3. From: Lee (Admin)12/04/2007 11:06:35

1. From: Kenny01/02/2007 01:20:38

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

4. From: Michael
Thanks
10/31/2008 19:44:58

2. From: Steven
11/28/2007 13:45:41

3. From: Lee (Admin)
12/04/2007 11:06:35

1. From: Kenny
01/02/2007 01:20:38