Simple Text Typing Animation With JavaScript

Simple Text Typing Animation With JavaScript

by

Adding a typing animation to a website makes it eye-catching. There are different types of animations available to add effects to a website.

One of the animation effects is typing text animation.

Text typing animation is a type of effect in which all alphabets of the text are shown on screen one by one. This type of animation is widely used in web applications nowadays.

It can be easily implemented using only JavaScript or pure CSS.

In this tutorial, I am going to show you how to add typing animation with JavaScript.

HTML

<p id="test"></p> 
<button onclick="typeWriting();">Click</button>

JavaScript

<script>
    var i = 0;
    var speed = 25;
    var para = "The quick brown fox jumps right over the lazy dog.";

    function typeWriting() {
          if (i < para.length) {
              document.getElementById("test").innerHTML += para.charAt(i);
              i++;
              setTimeout(typeWriting, speed);
        }
    }
</script>

You have learnt how to create typing text effect using JavaScript. If you have any query related to this tutorial, feel free to comment.

Leave a Comment