A L B E
document.addEventListener("DOMContentLoaded", function () { const letters = document.querySelectorAll(".animated-title .letter"); letters.forEach((letter, index) => { letter.style.animation = `slideIn 1s ease forwards`; letter.style.animationDelay = `${0.2 + index * 0.2}s`; // Индивидуальная задержка для каждой буквы }); });
.animated-title { display: flex; justify-content: center; color: #fff; /* Белый цвет текста */ font-size: 5rem; /* Размер текста */ font-weight: bold; text-transform: uppercase; overflow: hidden; } .animated-title .letter { opacity: 0; transform: translateY(50px); /* Начальная позиция букв */ animation: slideIn 1s ease forwards; } .animated-title .letter:nth-child(1) { animation-delay: 0.2s; /* Задержка для первой буквы */ } .animated-title .letter:nth-child(2) { animation-delay: 0.4s; /* Задержка для второй буквы */ } .animated-title .letter:nth-child(3) { animation-delay: 0.6s; /* Задержка для третьей буквы */ } .animated-title .letter:nth-child(4) { animation-delay: 0.8s; /* Задержка для четвертой буквы */ } @keyframes slideIn { to { opacity: 1; transform: translateY(0); /* Буквы плавно встают на свои места */ } }