« »

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

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

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

Comment (0)
Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

30/01/2007
Brian Gosselin [more]
2,386
0
0
0
8.08 KBytes

JavaScript Text Cross-Fader Script

0/5 0 votes / 2,386 previews / 0 comment 30/01/2007 Use this script to easily create crossfade color effects. Just put any text you want in 'SPAN', 'DIV', or 'P' HTML tags,...JavaScript Text Cross-Fader Script - Text Cross-Fader Script

Let's be first member to do this

JavaScript by day

Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web

Text Cross-Fader Script

Label: Text Cross-Fader Script (adsbygoogle = window.adsbygoogle || []).push({});

Free iPage Web Hosting for First Year NOW

Write your comment

JavaScript by day

Label: Text Cross-Fader Script