Бегущая строка (Marquee) — эффективный способ привлечь внимание к важной новости, списку клиентов или спецпредложению. Данное решение создает бесшовную цикличную ленту на аппаратном ускорении GPU: контент автоматически дублируется через JavaScript, а CSS-анимация обеспечивает непрерывное движение без дерганий и рывков.
1 Добавление суффикса класса к строке или секции
Добавь секцию с плагином Текст (Text), перейди в настройки строки или секции-контейнера и в поле Class Suffix пропиши класс:
Class Suffix
running-text-line2 Стилизация и расчет анимации движения (CSS)
Перейди в Инструменты ➝ Редактор кода ➝ CSS и добавь стили для создания бесконечной ленты:
CSS
/* Ограничивающий контейнер бегущей строки */.running-text-line { overflow: hidden; white-space: nowrap; display: flex; box-sizing: border-box;}.running-text-line .ba-grid-column { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; overflow: hidden;}/* Движущийся блок */.running-text-line .ba-item-text { display: inline-flex; flex-shrink: 0; white-space: nowrap; animation: runningMarquee 25s linear infinite; will-change: transform;}/* Пауза движения при наведении курсора */.running-text-line:hover .ba-item-text { animation-play-state: paused;}/* Ключевые кадры непрерывного смещения */@keyframes runningMarquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); }}3 Автоматическое бесшовное дублирование (JavaScript)
Перейди во вкладку Инструменты ➝ Редактор кода ➝ JavaScript и добавь скрипт клонирования контента для устранения пустых зазоров при прокрутке:
JavaScript
document.addEventListener('DOMContentLoaded', () => { const marqueeWrappers = document.querySelectorAll('.running-text-line .ba-grid-column'); marqueeWrappers.forEach(wrapper => { const textItem = wrapper.querySelector('.ba-item-text'); if (!textItem) return; // Клонируем элемент текста для создания бесконечного потока const clone = textItem.cloneNode(true); clone.setAttribute('aria-hidden', 'true'); wrapper.appendChild(clone); });});Обрати внимание:
Скорость перемещения регулируется в CSS параметром animation: runningMarquee 25s linear infinite; — чем меньше секунд (например, 15s), тем быстрее бежит строка. Чем больше секунд (например, 40s), тем мягче и плавнее прокрутка.