Site Moved

This site has been moved to a new location - Bin-Blog. All new post will appear at the new location.

Bin-Blog

Color Fade Effect using JavaScript

I recently created a fade effect for an element for the new version of Sudoku. I had to create the effect from scratch because I could not find any scripts in the net that matched my requirements. The result of my effort is given below. The hex2num and the num2hex functions were posted earlier.

////////////////////////////// Colour Functions /////////////////////////////////////
//Convert a hex value to its decimal value - the inputed hex must be in the
// format of a hex triplet - the kind we use for HTML colours. The function
// will return an array with three values.
function hex2num(hex) {
 if(hex.charAt(0) == "#") { 
  hex = hex.slice(1);
 }
 hex = hex.toUpperCase();
 var hex_alphabets = "0123456789ABCDEF";
 var value = new Array(3);
 var k = 0;
 var int1,int2;
 for(var i=0;i<6;i+=2) {
  int1 = hex_alphabets.indexOf(hex.charAt(i));
  int2 = hex_alphabets.indexOf(hex.charAt(i+1));
  value[k] = (int1 * 16) + int2;
  k++;
 }
 return(value);
}
//Give a array with three values as the argument and the function will return
// the corresponding hex triplet.
function num2hex(triplet) {
 var hex_alphabets = "0123456789ABCDEF";
 var hex = "#";
 var int1,int2;
 for(var i=0;i<3;i++) {
  int1 = triplet[i] / 16;
  int2 = triplet[i] % 16;

  hex += hex_alphabets.charAt(int1) + hex_alphabets.charAt(int2);
 }
 return(hex);
}

//Function that fades the color.
//Arguments...
//id  - ID of the element whose colour must be faded.
//start_hex - The initial color of the element.
//stop_hex - The final color. The element will fade from the initial color to the final color.
//difference- The colour values will be incremented by this number
//delay  - The speed of the the effect - higher delay means slower effect.
//color_background- The fade must be for the color of the element or for its background.
//      Allowed values are 'c'(Color of element) and 'b'(Background)
function fadeColor(id,start_hex,stop_hex,difference,delay,color_background) {
 //Default values...
 if(!difference) difference = 20;
 if(!delay) delay = 100;
 if(!start_hex) start_hex = "#FFFFFF";
 if(!stop_hex) stop_hex = "#000000";
 if(!color_background) color_background = "c";
 
 var ele = document.getElementById(id);
 if(!ele) return;
 var start= hex2num(start_hex);
 var stop = hex2num(stop_hex);
 
 //Make it numbers rather than strings.
 for(var i=0;i<3;i++) {
  start[i] = Number(start[i]);
  stop[i] = Number(stop[i]);
 }

 //Morph one colour to the other. If the start color is greater than the stop colour, start color will
 // be decremented till it reaches the stop color. If it is lower, it will incremented.
 for(var i=0;i<3;i++) {
  if (start[i] < stop[i]) {
   start[i] += difference;
   if(start[i] > stop[i]) start[i] = stop[i];//If we have overshot our target, make it equal - or it won't stop.
  }
  else if(start[i] > stop[i]) {
   start[i] -= difference;
   if(start[i] < stop[i]) start[i] = stop[i];
  }
 }

 //Change the color(or the background color).
 var color = "rgb("+start[0]+","+start[1]+","+start[2]+")";
 if(color_background == "b") {
  ele.style.backgroundColor = color;
 } else {
  ele.style.color = color;
 }

 //Stop if we have reached the target.
 if((start[0] == stop[0]) && (start[1] == stop[1]) &amp;& (start[2] == stop[2])) return;

 start_hex = num2hex(start);
 //Keep calling this function
 window.setTimeout("fadeColor('"+id+"','"+start_hex+"','"+stop_hex+"',"+difference+","+delay+",'"+color_background+"')",delay);
}

You can call the fade effect for an element <div id="element_to_fade">Hello World</div> using the code fadeColor("element_to_fade","#ACFF00","#0000FF",10,100,'c');. If you are feeling adventurous, try this...

function init() {
 fadeColor("element_to_fade","#0000FF","#ACFF00",10,100,'b');
 fadeColor("element_to_fade","#ACFF00","#0000FF",10,100,'c');
}
window.onload=init;

4 Comments:

sid said...

This script is really cool. I tried making a smiliar script but used flash instead. Hey but this works as wellas flash.

hiryuu said...

this script just roxxx!

sentimentalminions said...

Awesome script mate! Got this version working with elements themselves instead of an ID. Thanks a ton for sharing this with us.

SDFprowler said...

Awesome script! I searched google for a good JavaScript color fade script and yours looked promising. I modified it to allow a sort of pulsating effect that continually loops. I inserted the following code in the fadeColor function, just before the setTimeout:

//IE
if(ele.style.backgroundColor == 'rgb(0,254,255)')
{
fadeColor("tabExport","#00FFFF","#2461BF",1,15,'b');
}
if(ele.style.backgroundColor == 'rgb(36,98,191)')
{
fadeColor("tabExport","#2461BF","#00FFFF",1,15,'b');
}

//Firefox
if(ele.style.backgroundColor == 'rgb(0, 254, 255)')
{
fadeColor("tabExport","#00FFFF","#2461BF",1,15,'b');
}
if(ele.style.backgroundColor == 'rgb(36, 98, 191)')
{
fadeColor("tabExport","#2461BF","#00FFFF",1,15,'b');
}

By the way, this is how I initially fire off your fade effect (I use AJAX within asp.net - this code is within .aspx.vb code):

ScriptManager.RegisterStartupScript(Me, Me.GetType(), "sdf", "fadeColor(""tabExport"",""#2461BF"",""#00FFFF"",1,15,'b');", True)