Typing and Deleting Effect with JavaScript and CSS

CSS Javascript Web Development Front End Technology

With the help of CSS animations, we can create a typewriter typing and deleting effect using JavaScript.

The following example shows this effect.

Example

<!DOCTYPE html>
<html>
<style>
div {
   display: flex;
   margin: 4%;
   padding: 2%;
   box-shadow: inset 0 0 12px blue;
}
p {
   font-family: "Courier Monospace";
   font-size: 2em;
   color: red;
}
p:last-of-type {
   animation: type 0.33s infinite;
}
@keyframes type{
   to { opacity: .0; }
}
</style>
<body>
<div>
<p id="text"></p>
<p>|</p>
</div>
<script>
const words = ["Nulla", "facilisi", "Cras sed odio sed leo laoreet molestie id non purus.."];
let i = 0;
let counter;
function typeNow() {
   let word = words[i].split("");
   var loopTyping = function() {
      if (word.length > 0) {
         document.getElementById('text').innerHTML += word.shift();
      } else {
         deleteNow();
         return false;
      };
      counter = setTimeout(loopTyping, 200);
   };
   loopTyping();
};
function deleteNow() {
   let word = words[i].split("");
   var loopDeleting = function() {
      if (word.length > 0) {
         word.pop();
         document.getElementById('text').innerHTML = word.join("");
      } else {
         if (words.length > (i + 1)) {
            i++;
         }
         else {
            i = 0;
         };
         typeNow();
         return false;
      };
      counter = setTimeout(loopDeleting, 200);
   };
   loopDeleting();
};
typeNow();
</script>
</body>
</html>

Output

This will produce the following result −

AmitDiwan

Published on 13-Mar-2021 12:16:44

Previous Page Print Page