Learn how to create a typing effect with JavaScript.

To create the Typing Effect with JavaScript follow the step below:
- Add HTML
- Add CSS (optional)
- 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!
Read also:
CSS Slide Text Animation/ Slide Effect