Multiple Typing Text Animation in HTML CSS & JavaScript

2
Multiple Typing Text Animation in HTML CSS & JavaScript

Hello friend, hope you are doing awesome. Today in this blog you will learn to create Multiple Typing Text Animation using HTML CSS and JavaScript. I also have created a Website with Typing Text Effect.

Multiple typing text animation means the animation of the text that changes automatically like the typewriter effect. This typing text effect is going very famous nowadays. We can see this type of effect on website manly.

Let’s have a quick look at the given image of our project [Multiple Typing Text Animation]. In the image, we can see white text and blue text with the incomplete word. Actually, the with parts of the text will be constant and the blue part words will be animated with multiple texts.

To see the real demo of this multiple typing text animation and the HTML CSS and JavaScript code that I have used to create this project, you can watch the video tutorial of this project, which is given below.

Multiple Typing Text Animation using HTML CSS & JavaScript

I have provided all the HTML CSS and JavaScript code that I have used to create this multiple typing text animation. Before jumping into the source code files, you need to know some basic explanations of this given video tutorial.

As you have seen in the video tutorial on the multiple typing text animation using HTML CSS and JavaScript. On the screen, we have seen two types of text one is white-colored with constant features and another is blue-colored with an animated feature. Also, we have seen the blues portion text animated automatically with different text like a typewriter effect. To animate this text like a typewriter I have used CSS animation property and to change the text I have used some JavaScript.

I hope, now you can create this type of project [Multiple Typing Text Animation] easily, if you are feeling difficulty creating, I have provided all the source code below.

You Might Like This:

Multiple Typing Text [Source Code]

To get the following HTML CSS and JavaScript code for the Multiple Typing Text Animation, you need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    <!----======== CSS ======== -->
    <link rel="stylesheet" href="style.css">
    <!--<title>Typing Text Animation</title>-->
</head>
<body>
    <div class="container">
        <span class="text first-text">I'm a</span>
        <span class="text sec-text">Freelancer</span>
    </div>

    <script>
        const text = document.querySelector(".sec-text");

        const textLoad = () => {
            setTimeout(() => {
                text.textContent = "Freelancer";
            }, 0);
            setTimeout(() => {
                text.textContent = "Blogger";
            }, 4000);
            setTimeout(() => {
                text.textContent = "YouTuber";
            }, 8000); //1s = 1000 milliseconds
        }

        textLoad();
        setInterval(textLoad, 12000);
    </script>    
</body>
</html>
/* ===== Google Font Import - Poppins ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #010718;
    overflow: hidden;
}
.container{
    width: 246px;
    overflow: hidden;
}
.container .text{
    position: relative;
    color: #4070F4;
    font-size: 30px;
    font-weight: 600;
}
.container .text.first-text{
    color: #FFF;
}
.text.sec-text:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #010718;
    border-left: 2px solid #4070F4;
    animation: animate 4s steps(12) infinite;
}
@keyframes animate{
    40%, 60%{
        left: calc(100% + 4px);
    }
    100%{
        left: 0%;
    }
}

 

 

Previous articleQR Code Generator in HTML CSS & JavaScript
Next articleBuild A Notes App in HTML CSS & JavaScript

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here