TYPEWRITER TEXT EFFECT

by kalai 2008-04-30 18:58:07

We can create a sequences of characters letter by letter, simulating a typewriter by using setTimeout() function and setting the delay.

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
var text="content of text here";
var delay=50;
var currentChar=1;
var destination="[not defined]";

function type()
{
if (document.getElementById)
{
var dest=document.getElementById(destination);
if (dest)
{
dest.innerHTML=text.substr(0, currentChar);
currentChar++
if (currentChar>text.length)
{
currentChar=1;
setTimeout("type()", 5000);
}
else
{
setTimeout("type()", delay);
}
}
}
}

function startTyping(textParam, delayParam, destinationParam)
{
text=textParam;
delay=delayParam;
currentChar=1;
destination=destinationParam;
type();
}

//-->
</SCRIPT>
<title>JavaScript Typing Effect</title>
</head>
<body>
<DIV ID="textDestination">...</DIV>
</body>

<SCRIPT LANGUAGE="JavaScrip"t>
<!--
startTyping(text, 50, "textDestination");
//-->

</html>

Tagged in:

1979
like
0
dislike
0
mail
flag

You must LOGIN to add comments