ben de bir şeyler hazırladım chatgpt ile :d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
#animatedWord {
font-size: 2em;
font-weight: bold;
display: flex;
}
.char {
animation: colorChange 1s infinite; /* Animasyon süresi 1 saniye */
}
@keyframes colorChange {
0%, 100% {
color: red;
}
12.5% {
color: #ff7f00;
}
25% {
color: yellow;
}
37.5% {
color: #7fff00;
}
50% {
color: green;
}
62.5% {
color: #00ff7f;
}
75% {
color: cyan;
}
87.5% {
color: blue;
}
}
</style>
<title>Word Animation</title>
</head>
<body>
<div id="animatedWord">Merhaba Benim Adım SynthJob!</div>
<script>
const textElement = document.getElementById('animatedWord');
const text = textElement.innerText;
textElement.innerHTML = '';
for (let i = 0; i < text.length; i++) {
const charElement = document.createElement('span');
charElement.classList.add('char');
charElement.style.animationDelay = `${i * 0.1}s`; /* Her karakterin animasyon başlatma gecikmesini hızlandırmak için */
// Boşluk karakterlerini dikkate al
if (text[i] === ' ') {
charElement.innerHTML = ' '; // Boşluğu koru
} else {
charElement.innerText = text[i];
}
textElement.appendChild(charElement);
}
</script>
</body>
</html>
ChatGPT işe yaramış gibi hocam.Fevkalede
Buradan bakabilirsiniz
https://roketbayim.com/fevkalde.php