The following script is put in the document header. The main function moveHeader() calls the function moveChar() for every header character starting with the character given by currChar=0. The current character is moved to its static position in several jumps of size 100.

var step = 100;
var str = "Animated Header";
var currChar = 0;
var obj;

function moveHeader()
{
   if (currChar < str.length)
   {
     obj = document.getElementById("c" + currChar);
     obj.style.left = "600px";
     obj.style.visibility = "visible";
     moveChar();
   }
}

function moveChar()
{
   if (parseInt(obj.style.left) >= step && str.charAt(currChar) != ' ')
   {
     obj.style.left = (parseInt(obj.style.left) - step) + "px";
     setTimeout("moveChar()", 20);
   }
   else
   {
     obj.style.left = 0;
     currChar++;
     moveHeader();
   }
}

The animated header itself is produced by the following instructions:

<div style="color: blue; font-weight: 800; font-size: 36px;">
<script type="text/javascript">
for (var i=0; i<str.length; i++)
   document.write("<span id=\"c" + i + "\" style=\"position: relative; " +
    "visibility: hidden\">" + str.charAt(i) + "</span>");
</script>
</div>

The function moveHeader() from the header part of the script is called from the body part of the script:

moveHeader();