How TO - Typing Effect

Learn how to create a typing effect with JavaScript.

Creating a Typing Effect

Step 1) Add HTML:

Example

Step 2) Add JavaScript:

Example

var i = 0;
var txt = 'Lorem ipsum typing effect!'; /* The text */
var speed = 50; /* The speed/duration of the effect in milliseconds */

function typeWriter() {
if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
}
}

Try it Yourself »

Tip: Learn more about the window.setTimeout() method in our JavaScript Reference.

❮ Previous Next ❯