You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
1.2 KiB
JavaScript
37 lines
1.2 KiB
JavaScript
"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); |