JS Typing Effect

Learn how to create a typing effect with JavaScript.

To create the Typing Effect with JavaScript follow the step below:

1. Add HTML
2. Add CSS (optional)
3. Add JavaScript

Demo:

Step1.

Add HTML

<div id="text"></div>

Step2.

Add CSS

Set the colour and position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; 
}

Style the text:

#text {
   position: relative;
   color: #333;
   font-size: 50px;
   font-family: "Courier New", Courier, monospace;
   letter-spacing: 5px;
   text-shadow: 2px 2px rgba(0,0,0,0.1);   
}

Step3.

Add JavaScript

Type your text:

var text = document.getElementById('text');

var typewriter = new Typewriter(text, {
    loop: true
});

typewriter.typeString('Hello!')
    .pauseFor(2500)
    .deleteAll()
    .typeString('How are you today?')
    .pauseFor(2500)
    .deleteAll()
    .typeString('Have a nice day :)')
    .pauseFor(2500)
    .start();

Note: Don’t forget to add the JS library to your code!

<script src="https://cdnjs.cloudflare.com/ajax/libs/TypewriterJS/1.0.0/typewriter.min.js"></script>

To see the live output of the animation go to lenastanley.com.

Enjoy coding!