Typewriter Effect Using javascript

typewriter effect codepen

Hello friends today in this artical we will learn how to create stylist typing effect using javascript, Here i will provide complete source code of Typewriter Effect using css and javascript .

<style type="text/css">

body
{
	background:#3CF;
}

.typer 
{
   left: 50px;
   z-index: 10000;
}

.ticker_bg 
{
   background: #f0f0f0;
   width: 80%;
   height: 100px;
   left: 50px;
   position: relative;
   z-index: 1;
}

.typer p 
{
   font-size: 30px;
   letter-spacing: 0.1rem;
   overflow: hidden;
   font-family: 'Poppins', sans-serif;
}

.typer p span.typed-text 
{
   font-weight: bold;
   color: #000;
   font-size: 30px;
   text-shadow: 0px 2px 0px rgba(0,0,0,0.35);
}

.typer p span.cursor 
{
    display: inline-block;
    background-color: #ccc;
    margin-left: 0.1rem;
    width: 3px;
    animation: blink 1s infinite;
}
</style>



<div class="typer">
       <p>WE ARE <span class="typed-text"></span><span class="cursor"> </span></p>
    </div>
<script>
       const typedTextSpan = document.querySelector(".typed-text");
const cursorSpan = document.querySelector(".cursor");

const textArray = ["SCHAUHAN TYPING EFFECT", "TYPING EFFECT BY SCHAUHAN.IN", "TYPING EFFECT TUTORIALS"];
const typingDelay = 100;
const erasingDelay = 50;
const newTextDelay = 1000; // 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);
});

    </script>

typewriter effect codepen
typing and erasing animation css
typewriter effect css multiple lines
javascript text animation
chat typing animation css
typewriter effect react
css typing animation loop
css typing animation multiple lines codepen

Leave a Reply

avatar
  Subscribe  
Notify of