Typing Effect using HTML, CSS and Vanilla JavaScript - Coding Torque

byPiyush Patil -
0
Typing Effect using Vanilla JavaScript - Coding Torque

Typing Effect 

Hello Guys! Welcome to Coding Torque. In this blog, I'm going to explain to you how to make Typing effect using vanilla JavaScript. You can use this effect on your website/portfolio to showcase any skills/features. This will be a step-by-step guide. Let's get started 🚀.

Let's go step by step:

Step 1: HTML Code

<!doctype html>
<html lang="en">

<head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Typing Effect using JavaScript - @code.scientist</title>

</head>

<body>

    <div class="container">

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

    </div>

</body>

</html>

Output Till Now


Typing Effect using Vanilla JavaScript - Coding Torque

Step 2: 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: 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;
    }
}


Output Till Now


Typing Effect using Vanilla JavaScript - Coding Torque

Step 3: JavaScript Code

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


Code Credits: @Coding_Journey

Written by: Coding Torque | Piyush Patil

If you want me to code any project or post any specific post, feel free to DM me at IG @code.scientist or @codingtorque

If you have any doubt or any project ideas feel free to Contact Us 

Hope you find this post helpful💖 
 

 Follow us on Instagram for more projects like this👨‍💻 
Tags:

Post a Comment

Previous Post Next Post