Бегущая строка на 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 — текст обновляется без перезагрузки.