Full version: jsB@nk » Text » Karaoke » Mod Styles Text Effect
URL: https://www.javascriptbank.com/mod-styles-text-effect.html
A Cool lookig effect. Could be a Splash Intro Sceen for you Site or a Header for you site. - note to make it a header see Absoulte Positioning Tutorial.
Full version: jsB@nk » Text » Karaoke » Mod Styles Text Effect
URL: https://www.javascriptbank.com/mod-styles-text-effect.html
<STYLE type=text/css>BODY {BACKGROUND-COLOR: black; TEXT-ALIGN: center}SPAN.dynamic {BACKGROUND-COLOR: white; BORDER-BOTTOM: gray 2px double; BORDER-LEFT: gray 2px double; BORDER-RIGHT: gray 2px double; BORDER-TOP: gray 2px double; COLOR: black}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=JavaScript type=text/javascript><!-- // - Style Mod JavaScript Text Effect // - Declare Variables: // - Colorsvar BGCOLOR1="white",COLOR1="black",BGCOLOR2="red",COLOR2="white";var LASTCOLOR="red";// - go tovar URL="http://JavaScriptBank.com";var message;var messageLen;var spans;// - global countersvar count=0/* - counter for span creation*/, gcount=0 /* - counter for moving through IDs*/, gcount2 /* - same as gcount. but moving backwards*/, gcount3=0, gcount4=0;// - Event Handlers:window.onload=main;// - Main Sub Routine:function main(){ // - Init Variables: message=document.getElementById('prototypesid0').innerHTML;message=message.toUpperCase();messageLen=message.length;gcount2=message.length-1;// - Method Calls: CreatSpans();ResizeSpans();SequentiallyMove();}// - Other Sub Routines:function CreatSpans(){ for(var x=0;x<message.length;x++){ count=x+1;// - create element spans=document.createElement('span');// - set IDs and Class Name spans.id="sid"+x; spans.className="dynamic";// - set Event Handlers:spans.onclick=RichardHucko;// - Set One Letter Per Span, if letter equals to white space make it equal to an underscore that is not visible in order to keep proper positioning.spans.innerHTML=(message.substring(count-1,count)==" ")?"<b style='visibility:hidden'>_</b>":message.substring(count-1,count);with(spans.style){ backgrounColor=BGCOLOR1;color=COLOR1;border="2 double";} // - append tag in bodydocument.body.appendChild(spans); }}function ResizeSpans(){ for(var cntAdd=0,cntSubtr=message.length;cntAdd<message.length;cntAdd++,cntSubtr--) { with(document.getElementById('sid'+cntAdd).style){ fontSize=(cntAdd<((messageLen/2)-1))?eval((cntAdd+1)*10+10):eval((cntSubtr*10+10));} }} function SequentiallyMove(){ if(gcount<message.length) { if(gcount>0){with(document.getElementById('sid'+(gcount-1)).style) { backgroundColor=BGCOLOR1;color=COLOR1;border="2 double"; }} with(document.getElementById('sid'+gcount).style) { backgroundColor=BGCOLOR2;color=COLOR2;border="5 outset"; } gcount++; } else if(gcount2>=0) { if(gcount2<message.length-1) { with(document.getElementById('sid'+(gcount2+1)).style) { backgroundColor=BGCOLOR1;color=COLOR1;border="2 double"; }} with(document.getElementById('sid'+gcount2).style) { backgroundColor=BGCOLOR2;color=COLOR2;border="5 outset"; } gcount2--; } else if(gcount2==-1) { with(document.getElementById('sid'+(gcount2+1)).style) { backgroundColor=BGCOLOR1; color=COLOR1; border="2 double"; }gcount2=-2; } else if(gcount3<message.length) { with(document.getElementById('sid'+(gcount3)).style) { color=LASTCOLOR; border="none"; } gcount3++; } else if(gcount4<message.length) { with(document.getElementById('sid'+(gcount4)).style) { backgroundColor="black"; } gcount4++; } setTimeout("SequentiallyMove();",100);}function RichardHucko(){ // - Move to Current URL location.href=URL;// - Move to Current URL}//--></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SPAN id=prototypesid0 style="DISPLAY: none">JavaScriptBank.com</SPAN><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->