How to create: typing effect

Learn how to create typing effects using JavaScript.

　

Create typing effect

Step 1 - Add HTML:

<p id="demo"></p>

Step 2 - Add JavaScript:

var i = 0;
var txt = 'Lorem ipsum typing effect!'; /* Text to be displayed */
var speed = 50; /* Typing effect speed/duration, in milliseconds */
function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}

Try it yourself

Related pages

Reference manual:JavaScript window.setTimeout() method