How To Make CSS Text Animation Using HTML, CSS and JavaScript?

March 8, 2022

CSS Text Animation is a set of pre-made effects for text created using pure JavaScript and CSS by animating the text.

To create this project we need Three files.

index.html for HTML Code
style.css for CSS Code
app.js for JavaScript Code

The name is user-defined, you can use your won name, create the file and connect CSS and javascript files with HTML, you can follow the code given below.

Basic HTML Code:

<!DOCTYPE html>
<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>CSS Keyboard</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- HTML code goes here -->
    <script src="app.js"></script>
</body>
</html>

HTML Code For Text Animation Structure:

<div class="wraper">
    <span class="pre_text">I Love </span>
    <div class="text_wraper">
        <div class="innerText">
            <span>Panther</span>
            <span>Leopard</span>
            <span>Tiger</span>
            <span>Bird</span>
            <span>Tree</span>
        </div>
    </div>
</div>

CSS Code: Copy the code and paste it into the style.css file.

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    font-family: 'Open Sans', sans-serif;
}

.wraper {
    width: 500px;
    height: 500px;
    box-shadow: 0 3px 6px #00000045, 0 3px 20px #00000022;
    background: orange;
    color: #fff;
    font-size: 2rem;
    text-shadow: 2px 2px 2px #e67e22;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.pre_text {
    font-weight: bold;
    margin-right: 16px;
}

.text_wraper {
    height: 45px;
    overflow-y: hidden;
}

.text_wraper .innerText {
    display: flex;
    flex-direction: column;
    line-height: 45px;
}

JavaScript Code: Copy the javascript to make interactive or run the animation and paste it to your app.js file.

let innerTexts = document.querySelectorAll('.text_wraper .innerText');
if(innerTexts)
{
    innerTexts.forEach(innerText=>{
        /* make clone of first child start*/
        let firstText = innerText.firstElementChild.cloneNode('true');
        innerText.appendChild(firstText);
        /* make clone of first child end*/

        let i        = 0,
            speed    = 2000,
            distance = 45;

        setInterval(() => {
            let step = innerText.childElementCount;
            innerText.style.transform  = `translateY(-${distance * i}px)`;
            innerText.style.transition = "0.5s ease-in-out";
            console.log(i, step);
            if(i==step)
            {
                innerText.style.transition = "0s";
                innerText.style.transform = `translateY(0px)`;
            }

            // now change the value of i
            i = (i<step) ? (i+1) : 1;
        }, speed);
    });
}

Live Code Preview In Codepen:

CSS Keyboard | Create Keyboard Using HTML, CSS and JavaScript

Responsive HTML Table Design in CSS

Feel Free To Visit: Free Online Tools

My Youtube Channel Make Coding Easier

How To Make CSS Text Animation Using HTML, CSS and JavaScript?

Leave a Reply Cancel reply

Ads Blocker Detected!!!