<span class="word-container" data-word="THAT'Sâ €KILLA" data-word-repeat="4"
data-text-colors="#CC0000,#ffffff,#CC0000,#FEFCFE"></span>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap");
:root {
--angle: 4deg;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #000;
overflow: hidden;
}
.word-container {
position: relative;
width: 100%;
min-height: 100%;
outline: 1px solid red;
}
.word {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-family: "Montserrat";
font-size: 8rem;
font-weight: 900;
color: var(--color, #fff);
display: flex;
pointer-events: none;
user-select: none;
line-height: 5.8rem;
.char {
position: relative;
-webkit-text-stroke: 2px #000;
transform: translateY(-45%) rotate(var(--angle));
animation: up-and-down 2s ease infinite;
animation-delay: calc((var(--word-index) * -0.15s) + (var(--char-index) * 0.1s));
z-index: calc(-1 * var(--char-index));
margin-left: -1.6rem;
}
}
@keyframes up-and-down {
0%,
100% {
transform: translateY(-45%) rotate(var(--angle));
}
50% {
transform: translateY(45%) rotate(var(--angle));
}
}
.support{
position: absolute;
right: 10px;
bottom: 10px;
padding: 10px;
display: flex;
a{
margin: 0 10px;
color: #fff;
font-size: 1.8rem;
backface-visibility: hidden;
transition: all 150ms ease;
&:hover{
transform: scale(1.1);
}
}
}
View Compiled
console.clear();
const wordContainerEl = document.querySelector("[data-word]");
const word = wordContainerEl.getAttribute("data-word");
const wordRepeatTimes = wordContainerEl.getAttribute("data-word-repeat");
const textColorsArray = wordContainerEl.getAttribute("data-text-colors").split(",");
for (let i = 0; i < wordRepeatTimes; i++) {
const wordEl = document.createElement("span");
wordEl.className = "word";
wordEl.style.setProperty("--word-index", i);
wordEl.style.setProperty("--color", textColorsArray[i]);
for (let j = 0; j < word.length; j++) {
const charEl = document.createElement("span");
charEl.className = "char";
charEl.style.setProperty("--char-index", j);
charEl.innerHTML = word[j];
wordEl.appendChild(charEl);
}
wordContainerEl.appendChild(wordEl);
}