Анимация текста — это не просто модный тренд, а мощный инструмент коммуникации, способный значительно усилить восприятие контента. Грамотно применённая, она делает пользовательский опыт более увлекательным, интуитивным и запоминающимся.

Движущийся или изменяющийся текст сразу бросается в глаза. Это особенно важно в условиях информационного шума, когда пользователи сканируют страницы за секунды. Анимация помогает выделить ключевые сообщения, заголовки или призывы к действию.

Рассмотрим два варианта анимации текста для вашего сайта, которые реализованы с помощью JS.

Вариант 1

Сделаем последовательную смену слов с появлением и исчезновением (через прозрачность) с плаыным fade-in/fade-out эффектом.

ШАГ 1. В html-части добавим элемент:

<div id="word-container">Привет</div>

ШАГ 2. Добавим стили, которые определяют плавность смены текста и изначальный показатель прозрачности:

#word-container {
  font-size: 32px;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

ШАГ 3. И последний шаг для добавления динамики — js-скрипт:

<script>
const words = ["Привет", "Мир", "JavaScript", "Анимация"];
const el = document.getElementById("word-container");

let index = 0;

function showNextWord() {
  // Убираем текущий текст (fade out)
  el.style.opacity = 0;

  setTimeout(() => {
    // Меняем текст после исчезновения
    el.textContent = words[index];
    el.style.opacity = 1;

    // Переход к следующему слову
    index = (index + 1) % words.length;

    // Запускаем следующий цикл после паузы
    setTimeout(showNextWord, 3000); // 3 секунды на слово
  }, 1000); // время fade-out
}

// Старт
showNextWord();
</script>

• 1 секунда исчезновение (fade-out)
• 1 секунда появление (fade-in)
• 1 секунда пауза на экране

Длительность эффектов, количество слов и другие элементы стиля можно адаптировать под ваш проект.

Вариант 2

JavaScript-скрипт с анимацией печати слов по одной букве, стиранием и сменой на следующее слово. Работает с HTML-элементом

ШАГ 1. В html-части добавим элемент:

<span id="typewriter"></span>

ШАГ 2. Добавим скрипт:

<script>
const words = ["Привет", "Мир", "JavaScript", "Анимация"];
const el = document.getElementById("typewriter");

let wordIndex = 0;
let charIndex = 0;
let isDeleting = false;
let speed = 100; // скорость печати

function type() {
  const currentWord = words[wordIndex];
  
  // Определяем текущий текст для отображения
  let displayed = isDeleting
    ? currentWord.substring(0, charIndex--)
    : currentWord.substring(0, charIndex++);

  el.textContent = displayed;

  if (!isDeleting && charIndex === currentWord.length + 1) {
    // Подождать перед стиранием
    isDeleting = true;
    speed = 50;
    setTimeout(type, 1000);
    return;
  }

  if (isDeleting && charIndex === 0) {
    // Перейти к следующему слову
    isDeleting = false;
    wordIndex = (wordIndex + 1) % words.length;
    speed = 100;
  }

  setTimeout(type, speed);
}

// Запускаем
type();
</script>

ШАГ 3. С помощью стилей можем добавить мигающий курсор:

<style>
#typewriter::after {
  content: "|";
  animation: blink 1s infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
</style>