Thu. Nov 21st, 2024

sarveshpathak.com

Code Snippets, Tutorials, Articles, Technical Stuff

Create Rotate Text Style Using CSS and javascript

2 min read
Uploaded ToCreate Rotate Text Style Using CSS and javascript

Uploaded ToCreate Rotate Text Style Using CSS and javascript

Here we will learn how to create rotate text style using CSS and javascript.

Output

Learn Here

PHP ASP.NET MVC SQL SERVER Javascript

HTML
<div class="body2">
<div class="rotating-text">
  <p>Learn Here</p>
  <p>
    <span class="word alizarin">PHP</span>
    <span class="word wisteria">ASP.NET</span>
    <span class="word peter-river">MVC</span>
    <span class="word emerald">SQL SERVER</span>
    
  </p>
</div>
<div>
CSS CODE
.rotating-text {
font-family: Lato, 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 {
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: #e74c3c;
}

.wisteria {
color: #8e44ad;
}

.peter-river {
color: #3498db;
}

.emerald {
color: #2ecc71;
}

.sun-flower {
color: #f1c40f;
}

Javascript

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

Result

Learn Here

PHP ASP.NET MVC SQL SERVER Javascript

About Post Author

2 thoughts on “Create Rotate Text Style Using CSS and javascript

  1. Hey there 🙂

    Your wordpress site is very sleek – hope you don’t
    mind me asking what theme you’re using? (and don’t mind
    if I steal it? :P)

    I just launched my site –also built in wordpress like yours– but the theme slows (!) the site down quite a bit.

    In case you have a minute, you can find it by searching for “royal cbd” on Google (would appreciate any feedback) – it’s still in the works.

    Keep up the good work– and hope you all take care of yourself
    during the coronavirus scare!

  2. Good day! I know this is somewhat off topic but I was wondering
    if you knew where I could get a captcha plugin for my comment form?

    I’m using the same blog platform as yours and I’m having trouble finding one?
    Thanks a lot!

    P.S. If you have a minute, would love your feedback
    on my new website re-design. You can find it by searching for “royal cbd” – no sweat if you can’t.

    Keep up the good work!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.