{"flag":true,"single":true,"pageTitle":"typewriter effect in javascript","post":{"id":214,"user_id":"1","slug":"typewriter-effect-in-javascript-2owb","title":"typewriter effect in javascript","body":"<p><iframe style=\"display: table; margin-left: auto; margin-right: auto;\" src=\"https:\/\/www.youtube.com\/embed\/_9kaI_q4Hzs\" width=\"560\" height=\"314\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\r\n<p>&nbsp;<\/p>\r\n<p>Copy and paste below code in index.html file to get above result.<\/p>\r\n<pre class=\"language-markup\"><code>&lt;script type=\"text\/javascript\"&gt;\r\n\/\/ set up text to print, each item in array is new line\r\nvar aText = new Array(\r\n\"line 1\",\r\n\"line 2\",\r\n\"line 3\",\r\n\"line 4\",\r\n\"line 5\",\r\n\"    \",\r\n\"line 7\",\r\n\"line 8\",\r\n\"THE END \"\r\n);\r\nvar iSpeed = 100; \/\/ time delay of print out\r\nvar iIndex = 0; \/\/ start printing array at this posision\r\nvar iArrLength = aText[0].length; \/\/ the length of the text array\r\nvar iScrollAt = 20; \/\/ start scrolling up at this many lines\r\n \r\nvar iTextPos = 0; \/\/ initialise text position\r\nvar sContents = ''; \/\/ initialise contents variable\r\nvar iRow; \/\/ initialise current row\r\n \r\nfunction typewriter()\r\n{\r\n sContents =  ' ';\r\n iRow = Math.max(0, iIndex-iScrollAt);\r\n var destination = document.getElementById(\"typedtext\");\r\n \r\n while ( iRow &lt; iIndex ) {\r\n  sContents += aText[iRow++] + '&lt;br \/&gt;';\r\n }\r\n destination.innerHTML = sContents + aText[iIndex].substring(0, iTextPos) + \"_\";\r\n if ( iTextPos++ == iArrLength ) {\r\n  iTextPos = 0;\r\n  iIndex++;\r\n  if ( iIndex != aText.length ) {\r\n   iArrLength = aText[iIndex].length;\r\n   setTimeout(\"typewriter()\", 500);\r\n  }\r\n } else {\r\n  setTimeout(\"typewriter()\", iSpeed);\r\n }\r\n}\r\n&lt;\/script&gt;\r\n\r\n\r\n&lt;div id=\"typedtext\"&gt;&lt;\/div&gt;\r\n&lt;script type=\"text\/javascript\"&gt;typewriter();&lt;\/script&gt;<\/code><\/pre>","category_id":"12","is_private":"0","created_at":"2023-10-13T22:41:08.000000Z","updated_at":"2023-10-13T22:41:08.000000Z","category":{"id":12,"user_id":"1","name":"Javascript","slug":"javascript-xplw","parent_id":null,"created_at":"2023-03-23T02:24:43.000000Z","updated_at":"2023-03-23T02:24:43.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":" &nbsp; Copy and paste below code in index.html file to get above result. &lt;script type=\"text\/javascript\"&gt; \/\/ set up text to print, eac - typewriter effect in javascript (Updated: October 13, 2023) - Read more about typewriter effect in javascript at my programming site [SITE]","categories":[]}