»
EnglishFrenchVietnamese

Print - Text Cross-Fader Script - JavaScriptBank.com

Full version: jsB@nk » Text » Fade-Glow » Text Cross-Fader Script
URL: https://www.javascriptbank.com/text-crossfade-script.html

Text Cross-Fader Script © JavaScriptBank.comUse 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.

Full version: jsB@nk » Text » Fade-Glow » Text Cross-Fader Script
URL: https://www.javascriptbank.com/text-crossfade-script.html



JavaScript
<script language="javascript" title="textcrossfader.js">// TEXT CROSS-FADER SCRIPT V1.0// By: Brian Gosselinvar 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-->


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