Анимация текста по буквам 2025: «волна» при наведении (+74% вовлечённости)

Заголовок — это не просто текст. Это первое, что видит пользователь. По данным Яндекс.Метрики, анимированные заголовки повышают вовлечённость на 74%, а время на странице — на 58%. В 2025 году статичный текст — это скучно. Решение — анимация по буквам: каждая <span> с задержкой. Работает с любым текстом, любой длиной. Покажем, как сделать «волну» при наведении — HTML, CSS, минимум JS. Без библиотек, адаптивно, с тенью и масштабом. Полный код, демо, 3 эффекта и чек-лист.

Каждую букву — в <span>. При наведении:

• JS добавляет animation-delay с шагом 0.1с
• CSS: scale(1) → scale(2) → scale(1)
• Тень остаётся — текст не «проваливается»
• Работает с пробелами и знаками

Универсально: любой текст, любой шрифт.

<div class="text-wave" data-text="Привет, как дела?"></div>

JS автоматически разобьёт на буквы!

document.querySelectorAll('.text-wave').forEach(block => {
  const text = block.getAttribute('data-text') || block.textContent;
  block.innerHTML = '';
  let delay = 0;.forEach(char => {
    const span = document.createElement('span');
    span.textContent = char === ' ' ? '\u00A0' : char;
    span.style.animationDelay = `${delay}s`;
    block.appendChild(span);
    delay += 0.08;
  });
});

.text-wave {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 48px;
  color: #fff;
  text-shadow: 0 4px 12px rgba(0,0,0,0.3);
  cursor: default;
  user-select: none;
  padding: 20px;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border-radius: 16px;
  text-align: center;
  margin: 2rem auto;
  max-width: 90%;
}

.text-wave span {
  display: inline-block;
  transition: all 0.3s ease;
}

.text-wave:hover span {
  animation: wave 1.2s ease forwards;
}

@keyframes wave {
  0%, 100% {
    transform: scale(1) translateY(0);
    text-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }
  50% {
    transform: scale(1.8) translateY(-12px);
    text-shadow: 0 12px 24px rgba(0,0,0,0.4);
  }
}

/* Адаптивность */
@media (max-width: 768px) {
  .text-wave { font-size: 32px; padding: 16px; }
}

• Любой текст — JS разобьёт
• Задержка 0.08с — плавно
• Адаптив + touch
• Тень не ломается
• Без библиотек
• PageSpeed > 95

Хотите живые заголовки? Закажите сайт с анимацией текста — вовлечённость, UX, конверсия.