Такие строки легко интегрируются в любой проект. Они работают без плагинов, только на чистом JS, HTML и CSS. Пользователи замечают их сразу, что повышает вовлеченность. В этой статье разберем, как создать бегущую строку шаг за шагом.

Основы бегущей строки в JavaScript

Бегущая строка имитирует движение текста через контейнер. JavaScript управляет позицией элементов, создавая эффект бесконечного скролла. Для горизонтального движения текст дублируется, чтобы избежать пустот при прокрутке. Вертикальный вариант работает аналогично, но с изменением высоты.

Пример: текст “Новости обновлены” движется слева направо. Без JS это делали тегом , но он устарел и не поддерживается в современных браузерах. Теперь используют requestAnimationFrame для плавной анимации на 60 FPS. Это экономит ресурсы и предотвращает лаги.

• Горизонтальный скролл: текст сдвигается по оси X с помощью translateX или marginLeft.
• Вертикальный скролл: применяется translateY для движения вверх-вниз.
• Пауза на hover: останавливает анимацию при наведении мыши с addEventListener('mouseenter').

Создание бесконечной бегущей строки

Бесконечный эффект достигается дублированием текста. Когда первый блок уходит за край, подставляется копия. Функция addItemToScrolls добавляет элементы в контейнер динамически. Для горизонтали создаем span с классом “text-item” и вставляем текст через innerHTML.

Реальный пример: цикл по массиву items, где каждый элемент добавляется в несколько контейнеров. Звездочки или разделители усиливают визуал — функция createStar() генерирует их. Анимация запускается через requestAnimationFrame(move), где marquee.i отслеживает позицию.

function addItemToScrolls(text) {
  horizontalTextScroll.forEach((scrollItem) => {
    const textItem = document.createElement("span");
    textItem.classList.add("text-item");
    textItem.innerHTML = text;
    scrollItem.appendChild(textItem);
  });
}

• Дублирование: marquee.innerHTML += marquee.innerHTML.repeat(10) для запаса текста.
• Скорость: переменная step = 3 пикселя за кадр, регулируется для плавности.
• Стоп на mouseenter: marquee.step = 0 при наведении, возобновление на mouseleave.

Варианты реализации и стилизация

Гибкость JS позволяет кастомизировать направление, скорость и паузу. Для ротации текста используйте rotateMarquee, где элементы сдвигаются циклически. Вертикальный скролл меняет translateX на translateY в keyframes CSS. Добавьте CSS-анимацию для базового движения:

@keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
.marquee { animation: scroll 20s linear infinite; }

Пример с несколькими контейнерами: массив containers с items, сдвиг через requestAnimationFrame. Нюанс: проверяйте offsetWidth для точного позиционирования. Интеграция с современными эффектами — текст раскрывается при скролле страницы через Intersection Observer.

• Ротация: fade, slide left/right/up/down с animation-iteration-count: infinite.
• Скорость: animation-duration: 15s или JS-шаг для контроля.
• Направления: left, right, up, down через direction или transform.

Продвинутые эффекты бегущей строки

Комбинируйте с раскрытием текста на скролле: оборачивайте буквы в span, используйте transform: translateY с задержкой по индексу. При входе в viewport срабатывает анимация через scroll event. Это создает каскадный эффект, где буквы падают сверху.

Код для букв: цикл разбивает текст на span, присваивает --i для delay. window.addEventListener('scroll') проверяет видимость. Для мобильных — touch события вместо hover. Оптимизируйте: throttle события, чтобы не нагружать CPU.

• Каскад: animation-delay: calc(var(--i) * 0.1s) для букв.
• Reveal on scroll: opacity от 0 к 1 при getBoundingClientRect().top.
• Оптимизация: requestAnimationFrame вместо setInterval.

Гибкость бегущей строки в проектах

Бегущие строки подходят для дашбордов, новостных тиков и лендингов. Они заменяют устаревший с loop и direction. В продакшене учитывайте доступность: добавьте aria-label для скринридеров. Тестируйте на разных устройствах — скорость корректируйте по FPS.

Остается пространство для экспериментов: интегрируйте с WebGL для 3D-эффектов или React-компонентами. Подумайте о динамическом контенте из API — текст обновляется без перезагрузки.