<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<title>H1 fading effect demo</title>
</head>
<body>
<script type="text/javascript">
var h1Arr=[];
function h1Setup()
{
h1Arr=document.getElementsByTagName('h1');
for(var h=0;h<h1Arr.length;h++)
{
var h1=h1Arr[h],text=h1.firstChild.nodeValue;
h1.removeChild(h1.firstChild);
h1.animNodes=[];
for(var i=0;i<text.length;i++)
{
var span=document.createElement('span');
span.appendChild(document.createTextNode(text.substring(i,i+1)));
h1.appendChild(span);
h1.animNodes[h1.animNodes.length]=span
}
h1.animCount=0;
h1.animTimer=setInterval('h1Anim('+h+')',40)
}
};
function h1Anim(h)
{
var h1=h1Arr[h],al=h1.animNodes.length,c=h1.animCount++,noAnim=1;
for(var i=0;i<h1.animNodes.length;i++)
{
var s=h1.animNodes[i];
var frac=Math.max(0,Math.min(1,(c-i)/10));
//$('u').innerHTML+="<br/>"+c+"^^"+frac+"**"+i; if (i==al-1) $('u').innerHTML+="<br/>"
if(s.animDone)continue;
noAnim=0;
s.style.color='rgb('+parseInt(255-60*frac)+','+parseInt(255-200*frac)+','+parseInt(255-10*frac)+')';
if(frac==1)
{
s.style.marginLeft='auto';
s.animDone=1
}
else if(frac>0)s.style.marginLeft=0.6*(1-frac)+'em'
}
if(noAnim) clearInterval(h1.animTimer);
h1.style.visibility='visible'
};
if (document.documentElement)
{
// Hide H1 elements for animation and trigger show on load.
document.write('<style type="text/css"> h1 { visibility: hidden } </style>');
var h1aOL = window.onload;
window.onload = function()
{
if (h1aOL) h1aOL();
h1Setup();
}
}
--></script>
<h1>You don't you224r</h1>
<div id="u"></div>
</body>
</html>
