Membuat Animasi Teks bag 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Latihan Membuat Animasi 2 Informatika</title>
<styl>
/*
Weight axis: 100 – 700
Width axis: 85 – 100
*/
/* @import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Text:wght@100..900&display=swap */
@font-face {
font-family: 'Heading Now';
src: url('https://fonts.vdhazel.com/headingnow/Heading-Now-Variable-Regular-trial.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
* {
box-sizing: border-box;
}
body {
font-family: "Heading Now", sans-serif;
font-optical-sizing: auto;
font-style: normal;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
min-height: 100vh;
background-color: #000;
color: #fff;
}
.animated-text {
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
font-size: 10vw;
line-height: 10vw;
}
.letter {
display: inline-block;
--wght: 100;
--wdth: 85;
--opacity: 0.25;
--letter-spacing: 0;
--font-size: 10vw;
font-variation-settings: "wght" var(--wght), "wdth" var(--wdth);
opacity: var(--opacity);
letter-spacing: var(--letter-spacing);
font-size: var(--font-size);
transition:
font-variation-settings 1s ease-in-out,
opacity 1s ease-in-out,
letter-spacing 2s ease-in-out,
font-size 1s ease-in-out;
}
</style>
</head>
<body>
<script> document.addEventListener("DOMContentLoaded", () => {
const text = "INFORMATIKA";
const container = document.getElementById("animatedText");
// Create spans for each letter
text.split("").forEach(char => {
const span = document.createElement("span");
span.className = "letter";
span.innerHTML = char === " " ? " " : char; // Use for spaces
container.appendChild(span);
});
const letters = document.querySelectorAll(".letter");
const totalLetters = letters.length;
const delayIncrement = 100; // Delay in milliseconds
function easeInOutQuart(t) {
return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t;
}
function animateLetters(forward = true) {
letters.forEach((letter, index) => {
// const delay = Math.max(index, totalLetters - index) * delayIncrement;
const normalizedIndex = Math.max(index, totalLetters - 1 - index) / (totalLetters - 1);
const easedDelay = easeInOutQuart(normalizedIndex);
const delay = easedDelay * (totalLetters - 1) * delayIncrement;
setTimeout(() => {
letter.style.setProperty("--wght", forward ? 700 : 100);
letter.style.setProperty("--wdth", forward ? 400 : 150);
letter.style.setProperty("--opacity", forward ? 1 : 0.25);
letter.style.setProperty("--letter-spacing", forward ? '0.05em' : '0em');
// letter.style.setProperty("--font-size", forward ? '12vw' : '10vw');
}, delay);
});
setTimeout(() => animateLetters(!forward), 4000);
}
animateLetters();
});</script>
<div class="animated-text" id="animatedText"></div>
</body>
</html>
0 komentar: