JavaScript Typewriter Effect with Cursor

This JavaScript code helps you to create a typewriter effect with a blinking cursor on a webpage. It types and erases words. Helpful for adding dynamic text animations.

You can use this code on your website or blog to grab attention. It adds interactivity, making your content more engaging. It’s easy to implement and enhances user experience.

How to Create Typewriter Effect with Cursor Using JavaScript

1. Start by creating a container element in your HTML where the typewriter effect will be displayed. Inside this container, add a paragraph element with two spans: one for the typed text and one for the cursor.

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

2. Next, style your typewriter using CSS to customize the appearance of the text and cursor. You can adjust font styles, colors, and animation effects according to your preferences.

@import url('https://fonts.googleapis.com/css?family=Montserrat');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  font-family: 'Montserrat', sans-serif;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  color: #eee;
}
.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;
}
.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; }
}

3. Now, add the JavaScript code that creates the typewriter effect. This code will animate the text to simulate typing and erasing, giving the impression of a typewriter in action.

const typedTextSpan = document.querySelector(".typed-text");
const cursorSpan = document.querySelector(".cursor");

const textArray = ["hard", "fun", "a journey", "LIFE"];
const typingDelay = 200;
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);
});

Customize the textArray variable with the words or phrases you want to display. Adjust the timing delays (typingDelay, erasingDelay, and newTextDelay) to control the speed of typing, erasing, and displaying new text.

That’s all! hopefully, you have successfully created the Typewriter Effect with the Cursor on your website. If you have any questions or suggestions, feel free to comment below.