How to Create  Typing Effect javascript | typing effect html css javascript – codewithrandom 

Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a Typing Effect. We use HTML, Css, and javascript for this Typing Effect. Hope you enjoy our blog so let’s start with a basic HTML structure for a Typing Effect.

HTML code

  <div class="container">  
   <p>CODEWITHRANDOM is for <span class="typed-text"></span><span class="cursor">&nbsp;</span></p>  
  </div>  

There is all HTML code for the Typing Effect. Now, you can see output without CSS, then we write css & javascript for Typing Effect.

output

CSS Code

 @import url('https://fonts.googleapis.com/css?family=Montserrat');  
 * {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
 }  
 body {  
  font-family: 'Montserrat', sans-serif;  
  background-color: #000;  
  color: #eee;  
 }  
 .container {  
  height: 100vh;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
 }  
 .container p {  
  font-size: 2rem;  
  padding: 0.5rem;  
  font-weight: bold;  
  letter-spacing: 0.1rem;  
  text-align: center;  
  overflow: hidden;  
 }  
 .container p span.typed-text {  
  font-weight: normal;  
  color: #dd7732;  
 }  
 .container p span.cursor {  
  display: inline-block;  
  background-color: #ccc;  
  margin-left: 0.1rem;  
  width: 3px;  
  animation: blink 1s infinite;  
 }  
 .container p span.cursor.typing {  
  animation: none;  
 }  
 @keyframes blink {  
  0% { background-color: #ccc; }  
  49% { background-color: #ccc; }  
  50% { background-color: transparent; }  
  99% { background-color: transparent; }  
  100% { background-color: #ccc; }  
 }  

Now we have completed our CSS section,  Here is our updated output CSS.

output

Javascript code 

 const typedTextSpan = document.querySelector(".typed-text");  
 const cursorSpan = document.querySelector(".cursor");  
 const textArray = ["project", "fun", "free stuff", "tutorial"];  
 const typingDelay = 100;  
 const erasingDelay = 100;  
 const newTextDelay = 2000; // Delay between current and next text  
 let textArrayIndex = 0;  
 let charIndex = 0;  
 function type() {  
  if (charIndex < textArray[textArrayIndex].length) {  
   if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");  
   typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);  
   charIndex++;  
   setTimeout(type, typingDelay);  
  }   
  else {  
   cursorSpan.classList.remove("typing");  
       setTimeout(erase, newTextDelay);  
  }  
 }  
 function erase() {  
      if (charIndex > 0) {  
   if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");  
   typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex-1);  
   charIndex--;  
   setTimeout(erase, erasingDelay);  
  }   
  else {  
   cursorSpan.classList.remove("typing");  
   textArrayIndex++;  
   if(textArrayIndex>=textArray.length) textArrayIndex=0;  
   setTimeout(type, typingDelay + 1100);  
  }  
 }  
 document.addEventListener("DOMContentLoaded", function() { // On DOM Load initiate the effect  
  if(textArray.length) setTimeout(type, newTextDelay + 250);  
 });  

Final output