Typing Text Animation Tutorial Timed Loops and Array Programming Using Javascript
Learn to program arrays and timed loops in Javascript to animate typing text. We string.split() any string into an array, that we can then use array.shift() on to pluck each element off of the front of the array that represents your string.
<html>
<head>
<style type="text/css">
#myTypingText {
background-color:#000;
width:700px;
height:120px;
padding:12px;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
line-height:1.5em;
}
</style>
</head>
<body>
<div id="myTypingText"></div>
<script type="text/javascript" language="javascript">
var myString = "Place your string data here, and as much as you like.";
var myArray = myString.split("");
var loopTimer;
function frameLooper() {
if(myArray.length > 0) {
document.getElementById("myTypingText").innerHTML += myArray.shift();
} else {
clearTimeout(loopTimer);
}
loopTimer = setTimeout('frameLooper()',70);
}
frameLooper();
</script>
</body>
</html>
Typing Text Animation Tutorial Timed Loops and Array Programming Using Javascript