Auto Shuffle Text Animation




Source Code: HTML


<body>
    <div class="rotating-text">
        <p> Codewati is</p>
        <p>
            <span class="word red">Awesome</span>
            <span class="word purple"> Creative</span>
            <span class="word green"> Fabulous</span>
            <span class="word yellow"> Intresting</span>
        </p>
    </div>
</body>

Source Code: CSS

body{
    display: flex; justify-content: center; align-items: center;
    height: 100vh; background-color: #222;
}
.rotating-text{
    font-family: sans-serif; font-weight: 600; font-size: 36px;
    color: white; transform: translateX(-80px);
}
.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{
    transition: cubic-bezier(0.86, 0, 0.07, 1); transform: rotateX(90deg);
}
.rotating-text p .word .letter.in{
    transition: 0.10s ease;
}
.red{color: red;}
.purple{ color: purple;}
.green{ color: green;}
.yellow{ color: yellow;}

Source Code: Javascript

<script>
let words= document.querySelectorAll(".word");
words.forEach(words => {
    let letters = words.textContent.split("");
    words.textContent="";
    letters.forEach(letter => {
        let span =document.createElement("span");
        span.textContent=letter;
        span.className="letter";
        words.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];
    Array.from(currentWord.children).forEach((letter, i) => {
        setTimeout(() => {
            letter.className="letter out";
        }, i * 80);
    });
    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, 3000)
    </script>
Watch the YouTube video tutorial for a better understanding:

Comments

Post a Comment