Sunday, 22 May 2011

Text Dancing JavaScript


Copy The Below JavaScript code in Notepad and save the file with .html extension. And You are Done. Open The file with browser and see the magic. 




<html> 
<head> 
<title>Don't use Frames</title> 
<style type="text/css"> 
body{background:#FFF;color:#333;font-family:Georgia;margin:0;overflow:hidden;padding:0;text-align:center;}
h1{font-size:250%;margin:5em 0;}
h1 span{padding:0 3px;position:relative;}
a{color:#666;}
a:hover{color:#00F;}
address{bottom:10px;font-style:normal;position:absolute;right:10px;text-align:right;}
</style> 
<script type="text/javascript"> 

var n = 0;
function animate()
{
var e = document.getElementsByTagName("SPAN");
for (var i = e.length - 1; i >= 0; i--)
{
var s = Math.sin(n - i) * 10;
var t = Math.cos(n - i) * 10;
e[i].style.top = Math.round(s) + "px";
e[i].style.left = Math.round(t) + "px";
var c = 6 - Math.sin(n - i + 2) * 5;
e[i].style.textShadow = "#999 " + Math.round(c / 2) + "px " + Math.round(c) + "px 4px";
}
n += 0.2;
}
function start()
{
window.setInterval(animate, 20);
}

</script> 
</head> 
<body onload="start()"> 

<table cellpadding="0" cellspasing="0" height="100%" width="100%"> 
<tr> 
<td align="center"> 

<h1><span>D</span><span>o</span><span>n</span><span>'t</span><span> u</span><span>s</span><span>e</span><span> F</span><span>r</span><span>a</span><span>m</span><span>e</span><span>s.</span></h1> 

</td> 
</tr> 
</table> 

</body> 
</html>


If you Like the Post please feel free to comment . 

0 comments:

Post a Comment