<div class="container container--1">
<div class="text-container" data-text="LIGHT" data-text-count="4" data-icon-indexes="1,5">
</div>
<div class="text-container shadow-container" data-text="LIGHT" data-text-count="4" data-icon-indexes="1,5">
</div>
</div>
<div class="container container--2">
<div class="text-container" data-text="WORK" data-text-count="4" data-icon-indexes="2,4">
</div>
<div class="text-container shadow-container" data-text="WORK" data-text-count="4" data-icon-indexes="2,4">
</div>
</div>
<svg class="icons" style="display: none;">
<symbol id="star" viewbox="0 0 296.789 296.789">
<path
d="m 128.07699,246.6702 16.62278,44.87778 c 0.62488,1.68958 2.24042,2.81007 4.04647,2.81007 1.80605,0 3.42159,-1.12049 4.04646,-2.81007 l 16.62278,-44.87778 c 13.45522,-36.3312 42.2174,-64.97071 78.70166,-78.36601 l 45.06998,-16.55188 c 1.69428,-0.62221 2.81958,-2.23087 2.81958,-4.02922 0,-1.79835 -1.1253,-3.40699 -2.81958,-4.0292 l -45.07253,-16.5519 C 211.63034,113.74417 182.86815,85.107178 169.41548,48.778514 L 152.7927,3.900743 c -0.62487,-1.6870583 -2.24041,-2.8075483 -4.04646,-2.8075483 -1.80605,0 -3.42159,1.12049 -4.04647,2.8075483 L 128.07699,48.778514 C 114.62179,85.107178 85.862143,113.74417 49.375346,127.14199 l -45.0725171,16.5519 c -1.694284,0.62221 -2.819573,2.23085 -2.819573,4.0292 0,1.79835 1.125289,3.40701 2.819573,4.02922 l 45.0699771,16.55188 c 36.486798,13.3953 65.248984,42.03228 78.704184,78.36601 z">
</path>
</symbol>
</svg>
<div class="support">
<a href="https://twitter.com/DevLoop01" target="_blank"><i class="fab fa-twitter-square"></i></a>
<a href="https://dribbble.com/devloop01" target="_blank"><i class="fab fa-dribbble"></i></a>
</div>
@import url("https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap");
:root {
--animation-duration: 2400ms;
--animation-timing-function: ease-in-out;
--animation-iteration-count: infinite;
--bg-color: #f378c7;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100vh;
background-color: var(--bg-color);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
.icons {
display: none;
}
.container {
position: relative;
width: 400px;
height: 260px;
&--1 {
--delay-offset: -1000ms;
.text {
.char-container {
&:nth-child(1) {
.icon {
top: 50%;
left: 10%;
}
}
&:nth-child(5) {
.icon {
top: 15%;
left: 50%;
}
}
}
}
}
&--2 {
--delay-offset: -2000ms;
.text {
.char-container {
&:nth-child(2) {
.icon {
top: 60%;
left: 10%;
}
}
&:nth-child(4) {
.icon {
top: 75%;
left: 80%;
}
}
}
}
}
.text-container,
.shadow-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.text {
position: absolute;
top: 50%;
display: flex;
font-size: 12rem;
font-family: "Bebas Neue";
font-weight: bold;
letter-spacing: 5px;
-webkit-text-stroke: 2px #161618;
user-select: none;
pointer-events: none;
.char-container {
position: relative;
}
.icon {
position: absolute;
width: 1rem;
height: 1rem;
stroke-width: 25px;
stroke: #161618;
transform: translate(-50%, -50%);
animation: scaleUpdown var(--animation-duration) var(--animation-timing-function)
var(--animation-iteration-count);
animation-delay: var(--icon-animation-delay);
}
}
.text-container {
z-index: 1;
.text {
.icon {
fill: #f2f2f2;
}
transform: translate(-50%, -50%);
animation: upDown var(--animation-duration) var(--animation-timing-function)
var(--animation-iteration-count);
@for $i from 1 through 4 {
&:nth-child(#{$i}) {
left: 45% + $i * 0.5;
animation-delay: calc(var(--delay-offset) + (0.1s * #{$i}));
z-index: #{-$i};
}
}
}
}
.shadow-container {
z-index: 0;
.text {
-webkit-text-stroke: 0;
color: #e900a3;
top: 53%;
@for $i from 1 through 4 {
&:nth-child(#{$i}) {
opacity: 0;
left: 47% + $i * 0.5;
transform: translate(-50%, -50%);
// z-index: #{- ($i + 7)};
}
}
.icon {
fill: #e900a3;
stroke-width: 0;
}
}
}
}
@keyframes upDown {
0%,
100% {
opacity: 1;
transform: translate(-50%, -70%);
}
50% {
transform: translate(-50%, -30%);
}
}
@keyframes scaleUpdown {
0% {
transform: translate(-50%, -50%) scale(1) rotate(0);
}
50% {
transform: translate(-50%, -50%) scale(1.5) rotate(90deg);
}
100% {
transform: translate(-50%, -50%) scale(1) rotate(180deg);
}
}
.support{
position: absolute;
right: 10px;
bottom: 10px;
padding: 10px;
display: flex;
a{
margin: 0 10px;
color: #f2f2f2;
font-size: 1.8rem;
backface-visibility: hidden;
transition: all 150ms ease;
&:hover{
transform: scale(1.1);
}
}
}
View Compiled
console.clear();
const textContainers = document.querySelectorAll(".text-container");
const colorArr = ["#fdfdfa", "#7900CD", "#E6007B", "#F0FE09"];
textContainers.forEach((textContainer) => {
const delay = 200; // in millisecond
const totalTextCount = textContainer.getAttribute("data-text-count");
const elText = textContainer.getAttribute("data-text");
const iconIndexes = textContainer
.getAttribute("data-icon-indexes")
.split(",")
.map((n) => n - 1);
for (let i = 0; i < totalTextCount; i++) {
let textEl = document.createElement("span");
textEl.className = "text";
for (let j = 0; j < elText.length; j++) {
let charContainerEl = document.createElement("span");
charContainerEl.className = "char-container";
let charEl = document.createElement("span");
charEl.className = "char";
charEl.setAttribute("style", `--delay: ${delay - i * 100}ms`);
charEl.innerHTML = elText[j];
charContainerEl.append(charEl);
textEl.append(charContainerEl);
iconIndexes.forEach((iconIndex) => {
if (i == 0 && j == iconIndex) {
let iconContainierEl = document.createElement("span");
iconContainierEl.classList.add("icon-container");
let SVGEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
SVGEl.classList.add("icon", "star");
let SVGUseEl = document.createElementNS("http://www.w3.org/2000/svg", "use");
SVGUseEl.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#star");
SVGEl.setAttribute(
"style",
`--icon-animation-delay: ${Math.random() * i * 200}ms`
);
SVGEl.appendChild(SVGUseEl);
iconContainierEl.appendChild(SVGEl);
charContainerEl.appendChild(iconContainierEl);
}
});
}
textContainer.append(textEl);
}
const textArr = textContainer.querySelectorAll(".text");
if (!textContainer.classList.contains("shadow-container")) {
textArr.forEach((text, index) => {
text.style.color = colorArr[index];
});
}
});