How To Make A Text Animation Using HTML CSS And JavaScript

Creating Text Animation Using HTML CSS And Javascript

In this article, we are going to learn how to make a text animation using HTML CSS, and Javascript.

Scroll Bottom to download code source for free

Previous Article: Hero Image CSS: How To Create Hero Image Using HTML And CSS

*{
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;	        
      }
      /*css code*/
      @import url(https://fonts.googleapis.com/css?family=Lato:600);
      
      /*You can remove this body properties*/
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: #fff;
      }
      /*End of body properties*/
      
      .rotating-text {
        font-family: Lato, sans-serif;
        font-weight: 600;
        font-size: 36px;
        color: #000;
      }
      .rotating-text p {
        display: inline-flex;
        margin: 0;
        vertical-align: top;
      }
      .rotating-text p .word {
        position: absolute;
        display: flex;
        opacity: 0;
      }
      .rotating-text p .word .letter {
        transform-origin: center center 25px;
      }
      .rotating-text p .word .letter.out {
        transform: rotateX(90deg);
        transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2);
      }
      .rotating-text p .word .letter.in {
        transition: 0.38s ease;
      }
      .rotating-text p .word .letter.behind {
        transform: rotateX(-90deg);
      }
      .alizarin {
        color: #fe7c57;
      }
      .wisteria {
        color: #8e44ad;
      }
      .peter-river {
        color: #3498db;
      }
      .emerald {
        color: #1fae69;
      }
      .sun-flower {
        color: #ffb460;
      }
      
      @media only screen and (max-width: 768px) {
        .rotating-text p{
           font-size: 30px;
         }
       }
       
       @media only screen and (max-width: 425px) {
        .rotating-text p{
           font-size: 25px;
         }
       }
      
       @media only screen and (max-width: 375px) {
        .rotating-text p{
           font-size: 30px;
         }
       }

// Javascript Code
      "use strict";
    let words = document.querySelectorAll(".word");
    words.forEach(word => {
        let letters = word.textContent.split("");
        word.textContent = "";
        letters.forEach(letter => {
            let span = document.createElement("span");
            span.textContent = letter;
            span.className = "letter";
            word.append(span);
        });
    });
    let currentWordIndex = 0;
    let maxWordIndex = words.length - 1;
    words[currentWordIndex].style.opacity = "1";
    let rotateText = () => {
        let currentWord = words[currentWordIndex];
        let nextWord = currentWordIndex === maxWordIndex ? words[0] : words[currentWordIndex + 1];
        // rotate out letters of current word
        Array.from(currentWord.children).forEach((letter, i) => {
            setTimeout(() => {
                letter.className = "letter out";
            }, i * 80);
        });
        // reveal and rotate in letters of next word
        nextWord.style.opacity = "1";
        Array.from(nextWord.children).forEach((letter, i) => {
            letter.className = "letter behind";
            setTimeout(() => {
                letter.className = "letter in";
            }, 340 + i * 80);
        });
        currentWordIndex =
            currentWordIndex === maxWordIndex ? 0 : currentWordIndex + 1;
    };
    rotateText();
    setInterval(rotateText, 4000);

View Demo

Language

HTML, CSS & JavaScript

Responsive

Yes

Capable For Blogger

Let's Start a text animation

Creating an HTML structure for text animation

HTML

Create a file named index.html and add HTML markup and save it.

HTML Markup

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>

Head Tag

In the head tag, we have linked only the style.css file.

Head Tag Code

<head>
<title>[Tutorial] How To Create an amazing text animation with CSS, HTML and Javascript</title>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link type="text/css" rel="stylesheet" href="style.css">
</head>

Body Tag Code

<body>
<div class="rotating-text">
<p>CSS Animation is</p>
<p>
<span class="word alizarin">awesome.</span>
<span class="word wisteria">beautiful.</span>
<span class="word peter-river">creative.</span>
<span class="word emerald">fabulous.</span>
<span class="word sun-flower">interesting.</span>
</p>
</div>
<script type="text/javascript" src="script.js"></script>
</body>

With this we have completed our text animation HTML structure.

HTML Output

Related Article: Tutorial - To Change Background Color In JavaScript Function

Create a CSS file and name style.css and save it.

CSS Code

*{

margin: 0;

padding: 0;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-ms-box-sizing: border-box;

-o-box-sizing: border-box;

box-sizing: border-box;

}

/*css code*/

@import url(https://fonts.googleapis.com/css?family=Lato:600);

/*You can remove this body properties*/

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background: #fff;

}

/*End of body properties*/

.rotating-text {

font-family: Lato, sans-serif;

font-weight: 600;

font-size: 36px;

color: #000;

}

.rotating-text p {

display: inline-flex;

margin: 0;

vertical-align: top;

}

.rotating-text p .word {

position: absolute;

display: flex;

opacity: 0;

}

.rotating-text p .word .letter {

transform-origin: center center 25px;

}

.rotating-text p .word .letter.out {

transform: rotateX(90deg);

transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2);

}

.rotating-text p .word .letter.in {

transition: 0.38s ease;

}

.rotating-text p .word .letter.behind {

transform: rotateX(-90deg);

}

.alizarin {

color: #fe7c57;

}

.wisteria {

color: #8e44ad;

}

.peter-river {

color: #3498db;

}

.emerald {

color: #1fae69;

}

.sun-flower {

color: #ffb460;

}

@media only screen and (max-width: 768px) {

.rotating-text p{

font-size: 30px;

}

}

@media only screen and (max-width: 425px) {

.rotating-text p{

font-size: 25px;

}

}

@media only screen and (max-width: 375px) {

.rotating-text p{

font-size: 30px;

}

}

CSS Output

Other Articles: How To Make Responsive Navigation Menu - Free Code Source

Create javascript file and named script.js

Javascript Code

// Javascript Code

"use strict";

let words = document.querySelectorAll(".word");

words.forEach(word => {

let letters = word.textContent.split("");

word.textContent = "";

letters.forEach(letter => {

let span = document.createElement("span");

span.textContent = letter;

span.className = "letter";

word.append(span);

});

});

let currentWordIndex = 0;

let maxWordIndex = words.length - 1;

words[currentWordIndex].style.opacity = "1";

let rotateText = () => {

let currentWord = words[currentWordIndex];

let nextWord = currentWordIndex === maxWordIndex ? words[0] : words[currentWordIndex + 1];

// rotate out letters of current word

Array.from(currentWord.children).forEach((letter, i) => {

setTimeout(() => {

letter.className = "letter out";

}, i * 80);

});

// reveal and rotate in letters of next word

nextWord.style.opacity = "1";

Array.from(nextWord.children).forEach((letter, i) => {

letter.className = "letter behind";

setTimeout(() => {

letter.className = "letter in";

}, 340 + i * 80);

});

currentWordIndex =

currentWordIndex === maxWordIndex ? 0 : currentWordIndex + 1;

};

rotateText();

setInterval(rotateText, 4000);

Successfully we have created text animation. Now you can download text animation code source by clicking the download now button

Download Now

Thanks, Happy Learning 😊
Keep Visiting

How To Make A Text Animation Using HTML CSS And JavaScript

Creating Text Animation Using HTML CSS And Javascript

Leave A Relpy

Labels