Главная
»
Блог
»
Как сделать бегущую строку из логотипов на Zero Block в тильде

Как сделать бегущую строку из логотипов на Zero Block в тильде

10.02.2026
~ 2 минуты
время чтения статьи
Максимально простая и кастомизируемая бегущая строка из изображений, запускаемая с помощью CSS
Плавность движения остановка и увеличение изображения при наведении курсора

Пример реализации бегущей строки из лого

Настройка в конструкторе ZeroBlock

  1. Логотипы оборачиваем в группу и присваиваем CSS-class .run-line
  2. Важно: дублируем логотипы внутри группы чтобы строка была бесконечной. Скрипт прокручивает первую половину, и как только она заканчивается, мгновенно (и незаметно для глаза) возвращает вас в начало.

1. Общее описание

Этот код решает сразу две визуальные задачи:

  1. Создает «Бегущую строку» (Marquee): Элементы внутри контейнера .run-line бесконечно и плавно движутся влево.
  2. Добавляет микро-взаимодействия: Изображения по умолчанию выглядят стильными черно-белыми, но «оживают» (становятся цветными и немного увеличиваются), когда пользователь наводит на них курсор.

2. Детальный разбор (Что за что отвечает)

Блок А: Двигатель анимации

Класс .run-line запускает механизм.
  • animation: Здесь задан сценарий движения. linear означает, что строка движется равномерно, без рывков на старте и финише. infinite зацикливает процесс навсегда.
  • pointer-events: auto: Это критически важная строчка для UX. Часто при анимации блоки перекрывают друг друга, блокируя клики. Это свойство гарантирует, что кнопки или ссылки внутри бегущей строки останутся кликабельными.
  • @keyframes marquee-move: Это сама траектория. Мы двигаем блок от 0 до -50%.
  • Важно для верстки: Чтобы строка была бесконечной, контент внутри группы обычно дублируют (x2). Скрипт прокручивает первую половину, и как только она заканчивается, мгновенно (и незаметно для глаза) возвращает вас в начало.

Блок Б: Визуальный стиль (Ч/Б и Цвет)

Мы работаем с тегом img внутри нашей группы.
  • Состояние покоя: Картинки обесцвечены фильтром grayscale(100%) и сделаны чуть прозрачными (opacity: 0.7), чтобы не перетягивать на себя внимание, пока они не нужны пользователю.
  • Состояние наведения (:hover): Как только мышь касается картинки, CSS отключает фильтры (возвращает цвет и 100% непрозрачность).
  • Бонус: transform: scale(1.05) добавляет приятный эффект «подпрыгивания» или приближения картинки, давая пользователю четкую обратную связь: «Ты выбрал этот объект».

3. Шпаргалка: Что поменять под себя

Настройка скорости и направления

Скорость: Ищите 20s в строке animation.
  • Хотите быстрее? Поставьте 10s или 5s.
  • Хотите медленнее? Поставьте 40s или 60s.
  • Направление: В @keyframes замените translateX(-50%) на translateX(50%), если хотите, чтобы строка ехала в другую сторону (справа налево -> слева направо). Но убедитесь, что начальная позиция тоже скорректирована.

Настройка визуала

Прозрачность: В блоке .run-line img параметр opacity: 0.7.
  • Поставьте 1, если хотите, чтобы картинки всегда были плотными.
  • Поставьте 0.3, если хотите сделать их еле заметным фоном.

Настройка визуала

Прозрачность: В блоке .run-line img параметр opacity: 0.7.
  • Поставьте 1, если хотите, чтобы картинки всегда были плотными.
  • Поставьте 0.3, если хотите сделать их еле заметным фоном.

Степень черно-белости: filter: grayscale(100%).
  • Можно поставить 50%, тогда картинки будут просто приглушенными, а не полностью серыми.

Зум при наведении: В блоке .run-line img:hover параметр transform: scale(1.05).
  • 1.00 — картинка не будет увеличиваться.
  • 1.2 — сильное увеличение (будьте осторожны, может перекрывать соседей).

Остановка строки

Если вы хотите, чтобы вся лента замирала, когда пользователь рассматривает контент, просто удалите символы /* и */ вокруг строки: .run-line:hover { animation-play-state: paused; }

4. Код для вставки в блок T123

<style>
/* === НАСТРОЙКА БЕГУЩЕЙ СТРОКИ === */

/* Обращаемся к нашей группе по имени */
.run-line {
    /* Скорость движения. Меняйте 20s: меньше число = быстрее */
    animation: marquee-move 20s linear infinite;
    will-change: transform;
    /* Важно: разрешаем взаимодействие мышки с элементами внутри */
    pointer-events: auto; 
}

/* Сама анимация сдвига */
@keyframes marquee-move {
    0% { transform: translateX(0); }
    /* Сдвигаем на 50%, предполагая, что вы продублировали контент внутри группы */
    100% { transform: translateX(-50%); } 
}

/* Настройка, чтобы ВСЯ строка останавливалась при наведении*/
.run-line:hover { animation-play-state: paused; }


/* === ЭФФЕКТ Ч/Б -> ЦВЕТ === */

/* 1. Исходное состояние всех картинок в группе */
.run-line img {
    /* Делаем полностью черно-белым */
    filter: grayscale(100%);
    
    /* (Опционально) Делаем их чуть полупрозрачными в покое */
    opacity: 0.7;
    
    /* Плавность перехода в 0.3 секунды */
    transition: all 0.3s ease-in-out;
    
    /* Исправление бага в Safari, чтобы картинки не мерцали */
    -webkit-backface-visibility: hidden;
}

/* 2. Состояние при наведении на КОНКРЕТНУЮ картинку */
.run-line img:hover {
    /* Возвращаем цвет (убираем фильтр) */
    filter: grayscale(0%);
    
    /* Возвращаем полную непрозрачность */
    opacity: 1;
    
    /* Бонус: картинка чуть-чуть увеличивается при наведении.
       Если не нравится, удалите строку ниже с transform */
    transform: scale(1.05);
}
</style>

Еще статьи