Developer Snippet Diary

typewriter effect in javascript

 

Copy and paste below code in index.html file to get above result.

<script type="text/javascript">
// set up text to print, each item in array is new line
var aText = new Array(
"line 1",
"line 2",
"line 3",
"line 4",
"line 5",
"    ",
"line 7",
"line 8",
"THE END "
);
var iSpeed = 100; // time delay of print out
var iIndex = 0; // start printing array at this posision
var iArrLength = aText[0].length; // the length of the text array
var iScrollAt = 20; // start scrolling up at this many lines
 
var iTextPos = 0; // initialise text position
var sContents = ''; // initialise contents variable
var iRow; // initialise current row
 
function typewriter()
{
 sContents =  ' ';
 iRow = Math.max(0, iIndex-iScrollAt);
 var destination = document.getElementById("typedtext");
 
 while ( iRow < iIndex ) {
  sContents += aText[iRow++] + '<br />';
 }
 destination.innerHTML = sContents + aText[iIndex].substring(0, iTextPos) + "_";
 if ( iTextPos++ == iArrLength ) {
  iTextPos = 0;
  iIndex++;
  if ( iIndex != aText.length ) {
   iArrLength = aText[iIndex].length;
   setTimeout("typewriter()", 500);
  }
 } else {
  setTimeout("typewriter()", iSpeed);
 }
}
</script>


<div id="typedtext"></div>
<script type="text/javascript">typewriter();</script>
Posted by: R GONDAL
Email: rizikmw@gmail.com