Text Typing Animation Effect Using HTML, CSS, and JavaScript

Text Typing Animation Effect Using HTML, CSS, and JavaScript

Text Typing Animation Effect Using HTML, CSS, and JavaScript

Hello in this article I have shown you how to create text typing animation effects using HTML, CSS, and JavaScript programming code. I have already made another text typing animation and you can see that design if you want. 

This type of design is mainly used in the case of personal portfolio websites which greatly enhances the quality and beauty of the website. This type of typing is for different types of text, in some cases, the whole text is typed and in many cases, there is some text fix and some typing. 

CSS Text Typing Animation

In this case, there is some text fix and some part is being typed repeatedly. However, each time a different text is being typed. Here I have used five words. 

You can watch its live demo below if you want. You can also copy the required source code from there and use it in your own project. But if you are a beginner, you must follow the tutorial below. In that tutorial, I have shown step by step how I have created this text typing animation.

See the Pen
typing text 2 by Foolish Developer (@fghty)
on CodePen.

How To Create Text Typing Animation Effect

You can use many more words of your choice if you want. This text typing is structured using HTML programming code and designed using CSS code. In this case, the role of JavaScript programming code is the most important which helps to type.

First of all, you have to create an HTML and a CSS file. Be sure to attach the CSS file to the HTML file.

Step1: Create the basic structure

  These are the HTML programming codes that have been used to construct this text typing. The background of this type of text has been designed using the CSS codes below.

 <div class=”container”>
    <p>I am a <span class=”typed-text”></span><span class=”cursor”>&nbsp;</span></p>
  </div>
  @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;
}
Create the basic structure

Step2: Design the text in this design

The following CSS code has been used to design text that is static in this design.

.container p {
  font-size: 3rem;
  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;
}
Design the text in this design

Step 3: Design the cursor with CSS code

If you have seen the demo above, you must have noticed that there is a cursor that makes this typing text even more interesting. The following CSS programming codes have helped to design it.

.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; }
}
Design the cursor with CSS code

Step 4: Add the required text using JavaScript code

Using JavaScript code, I have added the text that is typed into this typing text. In that place, I basically added text for typing four but you can add a lot more text if you want.

 const typedTextSpan = document.querySelector(“.typed-text”);
const cursorSpan = document.querySelector(“.cursor”);
const textArray = [“Youtuber”, “Web Designer”, “Programer”, “Developer”];
const typingDelay = 200;
const erasingDelay = 100;
const newTextDelay = 2000; // Delay between current and next text
let textArrayIndex = 0;
let charIndex = 0;

Step 5: Enable typing text effect

This typing animation has been implemented using the JavaScript codes below. If you know the basic JavaScript programming code then surely you can understand the following JavaScript structure.

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);
});
Add the required text using JavaScript code

Hopefully from this article, you have learned how text typing animation effects are created using HTML CSS, and JavaScript programming code. If you have difficulty understanding, of course, you can comment.