Create Typewiter Effect HTML JavaScript | Typing Effect:codingtuting

How to Create as Automatic Typing Effect in HTML. We'll display a paragraph that display text like typing.

Auto Typing Effect | Image by Clker-Free-Vector-Images from Pixabay

We'll create a simple logic using the Recursion method. Although, it is possible using for loop, conditional block (if), Recursion is the best solution.

Hello and welcome back to the CodingTuting with Jignesh Panchal. I hope you like our last creation on Create Animated Background using Pure CSS. Please visit if you haven't. Let's get started for today's creation.

What is Recursion?

A function who calls itself is called Recursion and the function that is being called is called a recursive function.

It is a very useful method to solve problem in computer programming. We'll learn more about the Recursion Method in another post.

Preview of Typewiter Effect using JavaScript

I've used JavaScript setTimeout() function along with Recursion.

What is JavaScript setTimeout() function

setTimeout() function executes another function or line of codes after a specific time expires. And the time is given in milliseconds (1000 milliseconds = 1 Second).

We'll see in detail about setTimeout() function in another post.

HTML Typewriter Effect with Source Code

Let's talk about the source code before share it. See How I did this? Don't be hurry for source code.

I'm using Google Fonts in my code. You can use it too or any others as you like.

I took a section for the main container and placed a button and a <div> in it.
I took an empty <p> tag for display paragraph.
I gave some styles to give a good look.
I applied click event in addEventListener then called startTyping() function.
I created a conditional statement in the setTimeout() function that calls itself in every 40 milliseconds.
The line of code in if condition is adding 1 character while calling the startTyping() function each time.

Typewriter.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="https://fonts.googleapis.com/css?family=Lato|Nanum+Gothic:700|Raleway&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="Typewriter.css">

    <title>Typewriter</title>
</head>

<body>
    <h1 id="heading">Typewriter Effect</h1>

    <section id="main-content">
        <button class="myBtn" id="start">Start Typing</button>

        <div id="type-content">
            <p id="myWords"></p>
        </div>
    </section>

    <script src="Typewriter.js"></script>
</body>

</html>

Typewriter.css

/*Code by CodingTuting.Com*/
* {
    margin:0;
    padding: 0;
}

#heading {
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size: 60px;
    font-weight: 500;
    letter-spacing: 3px;
    color: #181873;
    padding: 15px;
}

#main-content {
    text-align: center;
    margin: 20px;
    padding: 20px;
}

.myBtn {
    padding: 10px 30px;
    font-size: 16px;
    background-color: transparent;
    outline: none;
    border: 1px solid;
    cursor: pointer;    
    color: #47477d;
    border-color: #7a7ab3;
    margin-right: 25px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.75);
}

button#start:hover, button#start:focus {
    background-color: #47477d;
    color: #fff;
    border-color:#47477d;
    -webkit-box-shadow: 0px 1px 4px 0px #47477d;
    box-shadow: 0px 1px 4px 0px #47477d;
}

#type-content {
    padding: 20px;
    margin: 25px 10px;
}

#myWords {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    font-size: 20px;
    outline: none;
    line-height: 1.5;
    text-align: justify;
    font-family: sans-serif;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    border-color: #7a7ab3;
}

#myWords:focus {
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.box-color {
    -webkit-box-shadow: 0px 2px 5px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 5px 2px rgba(0,0,0,0.75);
}

Typewriter.js

/*Code by CodingTuting.Com*/
let startBtn = document.getElementById("start");
let txtElement = document.getElementById("myWords");
let txtIndex = 0;

let txtString = `Lorem Ipsum is simply a dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.`;

let txtLength = txtString.length;

startBtn.addEventListener("click", startTyping);

function startTyping() {
    setTimeout(function () {
        if(txtIndex < txtLength) {
            txtElement.innerHTML += txtString.charAt(txtIndex);
            txtIndex++;
        }
        startTyping();
    }, 40);
}

This method is so simple, you can use this Typewriter Effect trick on your website to display any quotation or message, etc.

Have you got how the recursion works then, do comment below? And ask freely if you have any doubt.

Sharing is Caring

Thanks for Reading

Author : Jignesh Panchal

Hi, I'm Jignesh Panchal. I'm a Web Developer & Designer. I've started this blog to help the programmers using my experience and skills. You will get solutions and tips about Programming, Web Development etc.

2 Comments

Write Comments

rthwer

May 29, 2020 at 3:35 PM delete

Yes i am totally agreed with this article and i just want say that this article is very nice and very informative article.I will make sure to be reading your blog more. You made a good point but I can't help but wonder, what about the other side? !!!!!!Thanks mecanet