Full version: jsB@nk » Text » Animation » Word Style effect
URL: https://www.javascriptbank.com/word-style-effect.html
Word Style is a JavaScript/DHTML effect that colors characters in a phrase with a pattern, resizes characters, then the whole word, and finally displays some hidden text at the end. CROSS-BROWSER (IE 5+, Netscape 7+, Opera 7+, Mozilla 1.2+).
Full version: jsB@nk » Text » Animation » Word Style effect
URL: https://www.javascriptbank.com/word-style-effect.html
<script language="JavaScript" type="text/javascript"><!--// - User Edit/* READ FIRST!!!All Words that are Less than one less than the number of colors (in the COLORS array) long (in this case four) need to add ^, to make up for the length problem.example: var text="a^^^ good Day^ for^ a^^^ Picnic";multiple carets (^) were added after each word that was too short to make that word four characters long instead of whatever it was originally*/var text="Dynamic Scripts for^ a^^^ Dynamic Web^ Site!"; // -Style Sectionvar FONTSIZE=35; // Font-Sizevar FONTWEIGHT=900; // Font-Weight 0-900 or boldvar COLOR="black"; // Main Colorvar BACKGROUNDCOLOR="transparent"; // - Background-Colorvar SIZE=5;// - Number of Colors in COLORS Arrayvar COLORS=new Array(SIZE);// - Edit COLORS BELOW format COLORS=["colorone","colortwo","colorthree","...","...","...","...","...","..."];COLORS=["lightyellow","yellow","orange","red","darkred"]; // - COLORS starts from last element moving to the first (backwards)// - End COLORS Editvar post="tk";var hypertextreference="h"+"tt"+/* DynamicScripts By Richard Hucko, Kaneohe Hawaii */"p:"+"//"+"DynamicScripts"+"."+post;// - End User Edit// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - var T=100; // - Timer (in millisecondsvar FX=text.length;var newWord=new Array(FX);window.onload=main;function main(){ mkspns();restylespans();DynamicMove();}function mkspns(){ for(var DHTML=0;DHTML<FX;DHTML+=1) creatSpns(DHTML);}function creatSpns(HTML){ INTERACTIVITY=1; JAVASCRIPTS=HTML+INTERACTIVITY; DYNAMIC_HTML=document.createElement('span');if(text.substring(JAVASCRIPTS,JAVASCRIPTS-1)!=" "&&text.substring(JAVASCRIPTS,JAVASCRIPTS-1)!="^"){DYNAMIC_HTML.innerHTML=text.substring(JAVASCRIPTS,JAVASCRIPTS-1); newWord[HTML]=0;for(var Tmp=1,Pmt=SIZE;Tmp<SIZE+1;Tmp++,Pmt--){ if(text.substring(JAVASCRIPTS-Tmp,JAVASCRIPTS-eval(Tmp+1))==" ") newWord[HTML]=Pmt;}}else if(text.substring(JAVASCRIPTS,JAVASCRIPTS-1)=="^"){ if(text.substring(JAVASCRIPTS,JAVASCRIPTS-1)!=" ")newWord[HTML]="<b style='display:none;'></b>";}else{ DYNAMIC_HTML.innerHTML=DYNAMIC_HTML.innerHTML="<b style='visibility:hidden;'>_</b>";newWord[HTML]=" ";}DYNAMIC_HTML.name="DYNAMICSCRIPTS"+HTML;DYNAMIC_HTML.id="KANEOHE_HI_96744-"+HTML+"-SCRIPTING";DYNAMIC_HTML.onclick=WebDev;with(DYNAMIC_HTML.style){ fontSize=FONTSIZE;fontWeight=FONTWEIGHT;color=COLOR;backgroundColor=BACKGROUNDCOLOR;}document.getElementById('HAWAII').appendChild(DYNAMIC_HTML);}function WebDev(){location.href=hypertextreference;}function restylespans(){ for(var Richard_Hucko=0 , RHucko1 = COLORS.length ;Richard_Hucko < COLORS.length ;Richard_Hucko+=1,RHucko1--) setStyle(Richard_Hucko,RHucko1); for(var tnuoc=COLORS.length;tnuoc>0;tnuoc--) { for(var count=0;count<FX;count++) { if(newWord[count]==tnuoc) { setStyle(count,tnuoc); } } }}function setStyle(RICHARDHUCKO,HUCKORICHARD){ with(document.getElementById("KANEOHE_HI_96744-"+RICHARDHUCKO+"-SCRIPTING").style) { color=COLORS[HUCKORICHARD-1]; }}var gcounter=0,BOOL=BOOLEAN_VAL=true,LAV_NAELOOB=false;function DynamicMove(){ if(gcounter<FX){ if(gcounter>0) { document.getElementById("KANEOHE_HI_96744-"+(gcounter-1)+"-SCRIPTING").style.fontSize=FONTSIZE; document.getElementById("KANEOHE_HI_96744-"+gcounter+"-SCRIPTING").style.fontSize=eval(FONTSIZE+10); } gcounter++;}else if(BOOLEAN_VAL){ for(var HUCKO=0;HUCKO<FX;HUCKO++) document.getElementById("KANEOHE_HI_96744-"+HUCKO+"-SCRIPTING").style.fontSize=eval(FONTSIZE+40); BOOLEAN_VAL=false;T=+100;}else if(!LAV_NAELOOB){ for(var RICHARD=0;RICHARD<FX;RICHARD++) document.getElementById("KANEOHE_HI_96744-"+RICHARD+"-SCRIPTING").style.fontSize=FONTSIZE;LAV_NAELOOB=true;T=10;}else if(BOOL){ document.getElementById('bodycontent').style.visibility="visible";BOOL=false;}//document.getElementById("KANEOHE_HI_96744-"+(FX-1)+"-SCRIPTING").style.fontSize=FONTSIZE;setTimeout("DynamicMove();",T);}//--></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div id="HAWAII"></div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->