JavaScript Tutorial

adplus-dvertising
Animation In JavaScript
Previous Home Next

javascript provide Animation which is based on a phenomenon called persistence of vision The concept of animating is moving of an object in Javascript .

The object that is being animated is changed over a number of steps set at a certain interval over a certain period of time at each step the object may be changed in any number of ways

Example :

<Html> 
<Head>
<script> 
var theText = "r4r deal is a best deal service"; 
function nextSize(i,incMethod,textLength) 
{ 
if (incMethod == 1) return (85*Math.abs( Math.sin(i/(textLength/3.14))) ); 
if (incMethod == 2) return (275*Math.abs( Math.cos(i/(textLength/3.14)))); 
} 

function sizeCycle(text,method,dis) 
{ 
   output = ""; 
   for (i = 0; i < text.length; i++) 
   { 
       size = parseInt(nextSize(i +dis,method,text.length)); 
       output += "<font style='font-size: "
	   + size +"pt'>" +text.substring(i,i+
	   1)+ 
	   "</font>"; 
   } 
   theDiv.innerHTML = output; 
} 

function doWave(n) 
{   
 sizeCycle(theText,1,n); 
 if (n > theText.length) {n=0} 
 setTimeout ("doWave(" 
 + (n+1) + ")", 
 50); 
} 
</script> 
<body onload="doWave(10)"> 
<div ID="theDiv" 
align="center">@ r4rdeal</div> 
</Body> 
</Html>

Output :

Previous Home Next