»
EnglishFrenchVietnamese

Print - Word Style effect - JavaScriptBank.com

Full version: jsB@nk » Text » Animation » Word Style effect
URL: https://www.javascriptbank.com/word-style-effect.html

Word Style effect © JavaScriptBank.comWord 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



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


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