Auto Text using Css And javaScript

Auto Text Animation

Table of Contents

Indroduction of Auto Typing Text Animation In Css

Here, today we will see an Auto Typing Text Animation In Css with the help of HTML,CSS and JavaScript. This will be an animated project, as you can use it on your website to show your name or introduction with beautiful animation. You will see this on many websites to show their intro. with some better looks to impress the client or user.

Let’s start making it together by following the code step by step to understand it properly. Their code will be easy, as everyone can understand it, even a fresher, and they will also learn to introduce themselves with some creativity.

Step 1: Html Code For Auto Typing Text

First, we will create the structure of Auto Typing Text Animation In Css with the help of HTML. In this, we will first make the parent div, in which all the content shall be written. Then we will make two tags, one for the heading where something will be written already that will not change, and another one that will change with the help of javaScript.

<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">   
    <title>Typing text | LayakCoder</title>
    <link rel="stylesheet" href="Typing.css">

</head>
<body>
    
    <div class="container">
        <span class="text first-text">I'm a</span>
        <span class="text sec-text">Freelancer</span>
    </div>   
</body>
</html>

Step 2: CSS Code For Auto Typing Text

After making the structure of the Auto Typing Text Animation In Css, it’s time to design it using CSS (an external stylesheet attached to the HTML file). In which first we will take the parent div to the center and then we will design the interior element like the heading and another tag by giving color, font size, shadow, and setting their positions. At the end, we will use animation to adjust the left alignment of the auto-text.

@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: #000000;
    overflow: hidden;
}
.container
{
    width: 246px;
    overflow: hidden;
}
.container .text
{
    position: relative;
    color: #ec2424;
    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: #000000;
    border-left: 2px solid #36daf0;
    animation: animate 4s steps(12) infinite;
}
@keyframes animate
{
    40%, 60%
    {
        left: calc(100% + 4px);
    }
    100%
    {
        left: 0%;
    }
}

Step 3: JavaScript Code For Auto Typing Text

After making the structure and design of Auto Typing Text Animation In Css, we will now make it workable by making the auto-text with JavaScript. In which we will target the tag in which we have to apply animation, then we will make the functions in which we will set the names we want to show in autotext with timing to show the name with some fixed interval of time.

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

Output of Auto Typing Text Animation In Css

Finally, we made the Auto Typing Text Animation In Css with the use of HTML,CSS and JavaScript by doing the simple code step by step to clearify the code. You can make such projects for practice. If you want the source code, then click on the link given below to download the code.

Auto Text using Css And javaScript

For more explanation, click on the link given below to watch the video.

You can also check:

Press the download button to download the source code

1 KB

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow Us

Latest Posts

Quick Links