Бегущая лента логотипов по волне и кругу

Что это за эффект

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

Это родственник «Бегущей ленты», только для картинок. Текст по кривой ведёт SVG сам, а картинки так не умеет. Поэтому скрипт на каждом кадре ставит каждый логотип в его точку на кривой и поворачивает по касательной. Логотипов добавляется столько, сколько нужно, чтобы заполнить всю кривую, а отступы между ними чуть растягиваются, поэтому стыка не видно.

В примере — выдуманные бренды. Подставьте логотипы своих клиентов или партнёров.

Где использовать

• Блок «Нам доверяют» на лендинге — логотипы клиентов вместо скучной сетки.
• Партнёры и спонсоры мероприятия.
• Технологии и инструменты в портфолио или вакансии: иконки стека на ленте.
• Галерея: небольшие фото или карточки тоже можно пустить по кругу.

Как добавить на сайт

Через ИИ-агента — самый простой путь. Эти эффекты сделаны в первую очередь для тех, кто собирает сайт вместе с ИИ-агентом: Claude Code, Cursor или любым другим. Настройте эффект на примере выше, нажмите «Скопировать код» и вставьте его в чат агента с одной фразой: «Сделай мне такой эффект на сайте, вот наши логотипы». В скопированном коде уже есть описание эффекта и инструкция для агента. Он сам перенесёт стили, разметку и скрипт и подставит ваши логотипы. Ваши настройки сохранятся.

Вручную. «Скачать код» даёт готовую HTML-страницу с вашими настройками. «Скопировать код» копирует только стили, разметку и скрипт. Скрипт без зависимостей.

Каждый логотип пометьте атрибутом data-loop-item. Внутри может быть что угодно: картинка, встроенный SVG, карточка.

<ul class="logo-loop" aria-label="Нам доверяют">
  <li data-loop-item><img src="client-1.svg" alt="Клиент 1"></li>
  <li data-loop-item><img src="client-2.png" alt="Клиент 2"></li>
</ul>

.logo-loop { position: relative; aspect-ratio: 1200 / 520; overflow: hidden; color: #171717; }
.logo-loop img { display: block; height: 100%; width: auto; }

createLogoLoop(document.querySelector('.logo-loop'), { shape: 'wave', size: 44 });

Высоту логотипов задаёт скрипт, ширину каждый берёт по своим пропорциям, поэтому логотипы разной формы стоят ровно. Цвет ленты — CSS-свойство color у блока.

Настройки

• Форма — волна или круг.
• Направление — вперёд или назад.
• Скорость — как быстро едут логотипы.
• Изгиб — высота волны или размер круга.
• Размер — высота логотипа. Указана в единицах картинки шириной 1200 и масштабируется вместе с блоком.
• Отступ — расстояние между логотипами.
• Ширина ленты — толщина полосы под логотипами; 0 — без ленты.
• Поворачивать по кривой — логотипы наклоняются вслед за изгибом. Без него они остаются ровными.
• Останавливать под курсором — лента плавно замирает при наведении.

Доступность и производительность

Логотипы остаются обычным списком с подписями, а копии, которые добавляет скрипт, скрыты от скринридеров. Если в системе включено «Уменьшить движение», лента стоит на месте. Анимация идёт только пока лента видна, и двигается только transform, поэтому страница не пересчитывает раскладку на каждом кадре.

Частые вопросы

Подойдут ли PNG и JPG? Да, любые картинки. Для логотипов лучше SVG или PNG с прозрачным фоном.

Почему логотипы на ленте белые? В примере они встроенный SVG с цветом currentColor, поэтому цвет задаётся в CSS. Цвет картинок-файлов скрипт не меняет: на тёмной ленте берите светлые версии логотипов или уберите ленту.

Можно ли без ленты? Да, поставьте ширину ленты 0. Логотипы поплывут по невидимой волне — тогда подойдут их обычные цветные версии.