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

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

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

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

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

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

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


Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the Typing Effect. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a Typing Effect using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Share on:

Leave a Comment