JAVASCRIPT EXAMPLES: Dynamic Text Effects

Uncle Jim's Web Designs
JavaScript Examples

Dynamic Text Effects

INSTALLATION INSTRUCTIONS

COPY - Insert Between Head Tags: <HEAD></HEAD>

<script language="JavaScript" type="text/javascript"><!--
var message=new Array("Welcome","To","Uncle Jims","Dynamic HTML","JavaScripts","and More . . .");
var POSTOP=20;
var POSLEFT=40;
var posTP=POSTOP,posTN=-(POSTOP),posLP=POSLEFT,posLN=-(POSLEFT);
var gcount=0;
var count=0;
var bool=true;
var spans=new Array(5);
function Jim()
{
 for(var x=0;x<spans.length;x++)
 {
  spans[x]=document.getElementById('sid'+x);
	if(x!=2)
	  setSpanID(x);
		
  spans[x].onclick=DYNAMICSCRIPTS;
	// -  JavaScript 
 }
  Uncle_Jim_effect();
}
function setSpanID(IDno)
{
 switch(IDno)
  {
	case 0: 
    with(spans[0].style)
	  {
	    top=POSTOP;
			visibility="hidden";
	  }
  break;
  case 1: 
		with(spans[1].style)
	  {
	    left=POSLEFT;
			visibility="hidden";
	  }
	break;
	case 3: 
			with(spans[3].style)
	  {
	    left=-(POSLEFT);
			visibility="hidden";
	  }
	break;
	case 4: 
	  with(spans[4].style)
	  {
	    top=-(POSTOP);
			visibility="hidden";
	  }
	}
}
function Uncle_Jim_effect()
{
 if(posTP>-20&&gcount<message.length)
 {
  if(gcount==message.length-1)
	{
	 with(spans[2].style)
	 {
	   color="#00ff00";
	 }
	} 
  spans[4].innerHTML=spans[3].innerHTML=spans[2].innerHTML=spans[1].innerHTML=spans[0].innerHTML=message[gcount];
  for(var x=0;x<spans.length;x++)
   spans[x].style.visibility="visible";
   spans[0].style.top=posTP;
	 spans[1].style.left=posLP;
	 spans[3].style.left=posLN;
	 spans[4].style.top=posTN;
   posTP--;posLP-=2;posLN+=2;posTN++;
 }
 else if(gcount<message.length)
 {
  gcount++;posTP=POSTOP,posTN=-(POSTOP),posLP=POSLEFT,posLN=-(POSLEFT);
 }
 else if(bool==true)
 {
  if(count>=5)
	 bool=false;
	 count++;
 }
 else
 {
  for(var x=0;x<spans.length;x++)
  {
   spans[x]=document.getElementById('sid'+x);
	 if(x!=2)
	   setSpanID(x);
  }
	spans[2].style.color="navy";
   clearTimeout('timer');
 }
 timer=setTimeout("Uncle_Jim_effect();",20); 
}
function DYNAMICSCRIPTS()
{
  location.replace("http://jdstiles.com");
}

window.onload=Jim;
//--></script>
<style type="text/css">
</style>

COPY - Insert Inside Body: <BODY></BODY>

Close This Window