Бегущая строка в Tilda: логотипы и карточки без рывков

Бегущая строка в Tilda помогает показать партнёров, подборку услуг или серию небольших карточек, не превращая их в длинную вертикальную сетку. Но красивое движение само по себе не решает задачу: логотипы должны оставаться узнаваемыми, текст — читаемым, а кнопки — доступными.

Ниже — схема подключения мода «Бегущая строка из базовых и Zero-блоков». Разберём структуру карточек, два ряда, мобильную версию и причины рывков. Это руководство для ленты изображений и карточек; если требуется именно движущийся текстовый заголовок, сначала выберите решение для текстовой строки.

Только логотипы партнёров. Проверьте отдельный мод бегущей строки из логотипов. Он описывает свой способ подготовки исходного блока. Не переносите настройки и классы из другой модификации автоматически.

Карточки с текстом, изображениями и кнопками. Используйте бегущую строку из базовых и Zero-блоков. Мод повторяет исходные карточки и сохраняет их оформление и действия. Карточки остаются вашим контентом в Tilda: текст, изображения и стили меняются в исходном блоке.

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

Для начала подготовьте небольшой набор карточек одинаковой сложности. Не смешивайте короткий логотип и длинный отзыв в одной быстро движущейся строке: им требуется разное время на просмотр.

1. Соберите карточки в обычном блоке Tilda. Заполните изображения, заголовки, описания и ссылки. Проверьте их в статичном состоянии.
2. Укажите блок в конструкторе мода. Используйте ID или отдельный CSS-класс, который относится только к нужной секции.
3. Проверьте селектор карточки. Он должен выбирать внешнюю оболочку целиком: изображение, текст и кнопки. Если выбрать только картинку или заголовок, мод не получит полноценную карточку.
4. Задайте движение и управление. Начните с небольшой скорости, одного направления и паузы. Остальные эффекты добавляйте после проверки базового сценария.
5. Вставьте сгенерированный код в T123 после исходного блока и опубликуйте страницу. Затем проверьте ленту с реальными ссылками и действиями карточек.

Если в карточке есть действие магазина, проверяйте его отдельно: открытие товара, выбор параметров и добавление в корзину. Сам факт плавного движения не подтверждает, что все действия работают на копиях карточек.

В Zero Block сначала соберите каждую карточку в отдельную группу. Внутри могут быть изображение, текст и кнопка. Группам карточек назначьте класс run-card. Затем поместите эти группы в общий Auto Layout-контейнер с классом run-slider.

Получается простая вложенность: run-slider → run-card → содержимое карточки. Это классы групп внутри Zero Block. Не заменяйте их длинным названием мода и не смешивайте с полем CSS-класса всей секции.

Проверьте исходные отступы, ширины и высоты. Мод сохраняет стили карточек, поэтому разная высота текста или слишком узкая кнопка не исправятся после запуска анимации. Для динамической ширины проверьте поведение Auto Layout и Fill на нужных адаптивах.

Высоты Zero Block должно хватать и для карточек, и для управления. Отдельно откройте мобильные разрешения: контейнер может хорошо выглядеть на большом экране и обрезать нижнюю часть карточки на телефоне. В конструкторе выберите режим работы с Zero, затем вставьте код после исходного блока.

Для второго ряда в Zero Block используется отдельная структура: карточки run-card-2 внутри контейнера run-slider-2. Расположение обеих строк задаётся в самой Tilda. Мод управляет их движением.

Второй ряд можно направить в противоположную сторону и настроить его скорость относительно первого. Начните с близких скоростей и спокойного движения. Сильная разница скоростей уместна для декоративной подборки, но затрудняет чтение текстовых карточек.

Сначала добейтесь правильной работы одного ряда, затем добавляйте второй. Так проще найти ошибку в классах, вложенности или высоте контейнера. Проверьте каждый ряд отдельно и оба вместе на телефоне.

Скорость выбирайте по содержимому. Логотип считывается быстрее, чем карточка с заголовком, описанием и ценой. Прочитайте самую длинную карточку в движении: если не успеваете, снизьте скорость или сделайте ручное управление основным способом просмотра.

Настройте паузу и стрелки так, чтобы посетитель мог остановиться на нужном элементе. На телефоне проверьте касание и свайп, на компьютере — мышь и трекпад. Горизонтальное управление, включая Shift с колесом мыши там, где оно используется, не должно мешать обычной прокрутке страницы.

У мода предусмотрено отключение автоматического движения при системном предпочтении reduced motion, при этом остаются стрелки. Проверьте этот режим отдельно. Важные ссылки и предложения должны быть доступны и человеку, которому не подходит непрерывная анимация.

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

Движется только часть карточки. Проверьте внешний селектор в стандартном блоке или структуру групп в Zero. В ленту должна попадать карточка целиком. Назначение класса отдельному изображению вместо группы — типичная причина неполного захвата содержимого.

В Zero пропал ряд. Сверьте написание run-slider и run-card, а для второго ряда — соответствующие классы с суффиксом -2. Затем проверьте вложенность. Похожее название на соседней группе не создаёт нужной связи.

На повторе заметна пауза или пустой участок. Сначала проверьте ширину карточек, отступы и размер исходной подборки. Дождитесь загрузки изображений. После этого проверяйте скорость и эффекты: увеличение скорости не устраняет ошибку геометрии.

Кнопки обрезаны или перекрываются. Увеличьте доступную высоту контейнера и проверьте исходную компоновку. Отдельно проверьте мобильную версию и длинные заголовки. Стили карточки редактируются в Tilda, а не исправляются настройкой движения.

Лента нестабильна со сложным содержимым. Не используйте встроенные слайдеры, формы, видео и сторонние виджеты в качестве повторяемых карточек. Для диагностики оставьте простые карточки на копии страницы и добавляйте элементы по одному. Повторяемый интерактивный компонент может иметь собственные обработчики и внутреннее состояние.

• Каждая карточка читается и работает в исходном статичном блоке.
• В ленту попадает карточка целиком; второй ряд имеет отдельные классы.
• После нескольких повторов нет обрезанных элементов и неожиданных пустот.
• Пауза, стрелки, ссылки и кнопки работают на компьютере и телефоне.
• После подгрузки карточек структура ленты остаётся правильной.
• С включённым reduced motion контент доступен без автоматического движения.
• Вертикальная прокрутка страницы остаётся удобной.

Конструктор бегущей строки из карточек относится к тарифу Pro dsgnmax. На странице мода находятся актуальные настройки, инструкция и условия доступа. Сначала выберите подходящий источник карточек, затем настраивайте движение — это самый короткий путь к предсказуемому результату.