JS Typing Effect

Learn how to create a typing effect with JavaScript.

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

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

Step1.

Add HTML

<div class="container">
  <div class="face">
    <div class="smile"></div>
  </div>
<div id="text"></div>
</div>

Step2.

Add CSS

Style the text:

body {
  background-color: #2a9d8f; 
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  
}
.container {
  position: relative;
  top:0;
  left:30%;
  width:100%;
}

#text {
   position: absolute;
   color: #e9c46a;
   font-size: 50px;
   font-family: "Courier New", Courier, monospace;
   letter-spacing: 10px;
   text-shadow: 3px 5px 0px rgba(0, 0, 0, 0.7);
   
}

.face {
  position: absolute; 
  border-radius:50%;
  background-color: #ffe066;
  width:200px;
  height:200px;
  z-index:-5;
  left:270px;
  top:-80px;
  box-shadow: inset 5px 5px #f5cb5c, 5px 5px rgba(0,0,0,0.07);
  
  
}

.face:after {
  content:"";
  position: absolute;
  border-radius:50%;
  background-color: black;
  width:20px;
  height:20px;
  left:70px;
  top:60px;
  -webkit-transform-origin: 50%;
  -webkit-animation: blink 2s infinite;
}

.face:before {
  content:"";
  position: absolute;
  border-radius:50%;
  background-color: black;
  width:20px;
  height:20px;
  left:115px;
  top:60px;
  -webkit-transform-origin: 50%;
  -webkit-animation: blink 2s infinite;
}

.smile {
  position: absolute;
  top: 100px;
  left: 65px;
  width: 80px;
  height: 40px;
  border-radius: 0 0 100px 100px;
  overflow: hidden;
  background:#000;
}
  
.smile:after {
  content:"";
  position: absolute;
  top: 15px;
  left: 12px;
  width: 70%;
  height: 70%;
  border-radius: 100px 100px 0 0;
  background: #e56b6f;
  
}

@-webkit-keyframes blink {
    0%, 100% {
        transform: scale(1, .05);
    }
    5%,
    95% {
        transform: scale(1, 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.

Watch also the video tutorial:

Enjoy coding!