Бегущая строка на JavaScript: создание, примеры и код

hannadev

Бегущая строка на JavaScript — это динамичный элемент для сайтов, который прокручивает текст бесконечно. Она привлекает внимание к важным уведомлениям, новостям или акциям. Это решает проблему статичного контента, делая интерфейс живым и информативным.

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

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

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

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

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

Направление	CSS-свойство	Пример кода
Влево	translateX(-100%)	`element.style.transform = 'translateX(-100%)';`
Вправо	marginLeft отрицательное	`marquee.style.marginLeft = \`-${marquee.i}px`;` \|
Вверх	translateY(-100%)	`translateY` для вертикали

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

Бесконечный эффект достигается дублированием текста. Когда первый блок уходит за край, подставляется копия. Функция 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.

Параметр	Описание	Значение по умолчанию
step	Скорость сдвига	3 px/кадр
width	Ширина marquee	element.offsetWidth
pause	Пауза на hover	false

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

Гибкость 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.

Метод	Преимущества	Недостатки
CSS keyframes	Простота, производительность	Меньше контроля
JS requestAnimationFrame	Полный контроль, пауза	Больше кода
Canvas	Для сложной графики	Переусложнено для текста

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

Комбинируйте с раскрытием текста на скролле: оборачивайте буквы в 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.

Эффект	JS-функция	CSS-поддержка
Бесконечный	moveMarquee()	linear infinite
Пауза	mouseover/out	hover: animation-play-state: paused
Вертикаль	translateY	keyframes 0%-100%

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

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

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