« »

Use this script to easily create crossfade color effects. Just put any text you want in 'SPAN', 'DIV', or 'P' HTML tags, add a snippet of code, and the script does the rest. This effect only works in newer 'standards' browsers such as IE5.5+, Netscape6+, and Mozilla. It will NOT work in IE4 or Netscape 4.x, but will not generate errors. Those older browsers will simply display the text normally.

Label: Text Cross-Fader Script

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<script language="javascript" title="textcrossfader.js">
// TEXT CROSS-FADER SCRIPT V1.0
// By: Brian Gosselin

var tcs=new Array();

function cSet(hexn){
var ca=new Array();
for(i=1,n=0;i<7;i+=2,n++)ca[n]=parseInt('0x'+hexn.substring(i,i+2));
return ca;
}

function calcSteps(sc,ec,l){
var cSteps=new Array();
for(i=0;i<3;i++)cSteps[i]=((ec[i]-sc[i])/l);
return cSteps;
}

function setHexColor(ca){
var R=ca[0].toString(16);
var G=ca[1].toString(16);
var B=ca[2].toString(16);
if(R.length==1)R='0'+R;
if(G.length==1)G='0'+G;
if(B.length==1)B='0'+B;
return '#'+R+G+B;
}

function crossFadeText(els,c1,c2){
if(document.getElementById){
var id=document.getElementById(els);
var ta=new Array();
var t='';
id.l=id.innerHTML.split('');
id.c1=cSet(c1);
id.c2=cSet(c2);
id.steps=calcSteps(id.c2,id.c1,id.l.length);
for(var i=0;i<id.l.length;i++)t+='<span id="'+(id.id+'_'+i)+'">'+id.l[i]+'</span>';
id.innerHTML=t;
for(i=0;i<id.l.length;i++){
ta[0]=id.c1[0]-Math.floor(id.steps[0]*i);
ta[1]=id.c1[1]-Math.floor(id.steps[1]*i);
ta[2]=id.c1[2]-Math.floor(id.steps[2]*i);
document.getElementById(id.id+'_'+i).style.color=setHexColor(ta);
}}}

</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<h1><span id="text2">Text Cross-</span><span id="text1">Fader Script</span></h1>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->