»
EnglishFrenchVietnamese

Print - Mod Styles Text Effect - JavaScriptBank.com

Full version: jsB@nk » Text » Karaoke » Mod Styles Text Effect
URL: http://www.javascriptbank.com/mod-styles-text-effect.html

Mod Styles Text Effect © JavaScriptBank.comA 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: http://www.javascriptbank.com/mod-styles-text-effect.html



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


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


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