Web Development Training System

Typing Text Animation Tutorial Array Loop Programming

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> #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> 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); return false; } loopTimer = setTimeout('frameLooper()',70); } frameLooper(); </script> </body> </html>