I really liked what they did with the text over at http://panda.network/ so I thought I'd have a crack at making my own implementation here.
A Pen by Rachel Smith on CodePen.
Created
January 12, 2022 08:24
-
-
Save chrisle/7395792b9c95d3bbb56626a4601319be to your computer and use it in GitHub Desktop.
Rotating text
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="text"> | |
| <p>Nachos are</p> | |
| <p> | |
| <span class="word wisteria">tasty.</span> | |
| <span class="word belize">wonderful.</span> | |
| <span class="word pomegranate">fancy.</span> | |
| <span class="word green">beautiful.</span> | |
| <span class="word midnight">cheap.</span> | |
| </p> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var words = document.getElementsByClassName('word'); | |
| var wordArray = []; | |
| var currentWord = 0; | |
| words[currentWord].style.opacity = 1; | |
| for (var i = 0; i < words.length; i++) { | |
| splitLetters(words[i]); | |
| } | |
| function changeWord() { | |
| var cw = wordArray[currentWord]; | |
| var nw = currentWord == words.length-1 ? wordArray[0] : wordArray[currentWord+1]; | |
| for (var i = 0; i < cw.length; i++) { | |
| animateLetterOut(cw, i); | |
| } | |
| for (var i = 0; i < nw.length; i++) { | |
| nw[i].className = 'letter behind'; | |
| nw[0].parentElement.style.opacity = 1; | |
| animateLetterIn(nw, i); | |
| } | |
| currentWord = (currentWord == wordArray.length-1) ? 0 : currentWord+1; | |
| } | |
| function animateLetterOut(cw, i) { | |
| setTimeout(function() { | |
| cw[i].className = 'letter out'; | |
| }, i*80); | |
| } | |
| function animateLetterIn(nw, i) { | |
| setTimeout(function() { | |
| nw[i].className = 'letter in'; | |
| }, 340+(i*80)); | |
| } | |
| function splitLetters(word) { | |
| var content = word.innerHTML; | |
| word.innerHTML = ''; | |
| var letters = []; | |
| for (var i = 0; i < content.length; i++) { | |
| var letter = document.createElement('span'); | |
| letter.className = 'letter'; | |
| letter.innerHTML = content.charAt(i); | |
| word.appendChild(letter); | |
| letters.push(letter); | |
| } | |
| wordArray.push(letters); | |
| } | |
| changeWord(); | |
| setInterval(changeWord, 4000); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url(https://fonts.googleapis.com/css?family=Open+Sans:600); | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| font-weight: 600; | |
| font-size: 40px; | |
| } | |
| .text { | |
| position: absolute; | |
| width: 450px; | |
| left: 50%; | |
| margin-left: -225px; | |
| height: 40px; | |
| top: 50%; | |
| margin-top: -20px; | |
| } | |
| p { | |
| display: inline-block; | |
| vertical-align: top; | |
| margin: 0; | |
| } | |
| .word { | |
| position: absolute; | |
| width: 220px; | |
| opacity: 0; | |
| } | |
| .letter { | |
| display: inline-block; | |
| position: relative; | |
| float: left; | |
| transform: translateZ(25px); | |
| transform-origin: 50% 50% 25px; | |
| } | |
| .letter.out { | |
| transform: rotateX(90deg); | |
| transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| } | |
| .letter.behind { | |
| transform: rotateX(-90deg); | |
| } | |
| .letter.in { | |
| transform: rotateX(0deg); | |
| transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| } | |
| .wisteria { | |
| color: #8e44ad; | |
| } | |
| .belize { | |
| color: #2980b9; | |
| } | |
| .pomegranate { | |
| color: #c0392b; | |
| } | |
| .green { | |
| color: #16a085; | |
| } | |
| .midnight { | |
| color: #2c3e50; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment