Description:-

Hello everyone! In this video, you are going to learn " How to Create Typing Effect Text - Using HTML & CSS ".

Let's see!

Result -

Typing Effect Text - Codexbaba

You Might Also Like ➝

• Authentic Weather Loader - Using HTML & CSS

• DROPMORPHISM UI DESIGN - Using HTML & CSS

• Profile card hover effect - Using HTML & CSS

• About us page with pop effect - Using HTML & CSS

• Social Media Button Hover Effect - Using Html & CSS 

• Login in Page - Using HTML & CSS

• CardHover -Using HTML & CSS

All the source codes and source files and available to download from here. Copy and paste the code from the text editors. First, try it by following the video tutorial. It will help you to understand all of it. After that, if you have got something wrong with your code use the given source codes to compare with yours. It will help you to understand all of it and your mistakes.

Source code:-

Typing Effect Text - Using HTML & CSS

HTML 

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

CSS

@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: 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; } }

JAVASCRIPT

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); });

× NOTE: Make sure that you follow us on Telegram ( our recommendation ). Some drives will be telegram exclusive.

Follow us

Telegram

Join Our Telegram Group of your batch and get Off-campus and Job updates.

Instagram

Join Our Instagaram channel of your batch and get Off-campus and Job updates.

full-width

You Might Also Like ➝

• Authentic Weather Loader - Using HTML & CSS

• DROPMORPHISM UI DESIGN - Using HTML & CSS

• Profile card hover effect - Using HTML & CSS

• About us page with pop effect - Using HTML & CSS

• Social Media Button Hover Effect - Using Html & CSS 

• Login in Page - Using HTML & CSS

Thanks for reading our article.