Бесконечная лента логотипов (CSS marquee)

Бесконечная лента логотипов (CSS marquee): для чего нужен

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

Генератор собирает ленту только на CSS: содержимое дублируется, а анимация проходит ровно один круг, чтобы стыковаться без разрыва. Выберите скорость, направление, отступы, высоту логотипов, исчезающие края и серые логотипы, которые обретают цвет при наведении. Копия скрыта от программ чтения с экрана, лента останавливается при наведении и фокусе, а для тех, кто просил меньше движения, она неподвижна.

Как пользоваться

1. Вставьте адреса логотипов или напишите названия.
2. Настройте скорость, направление и отступы.
3. Скопируйте код и вставьте на страницу.

Когда использовать

• Обслуживаемые клиенты.
• Бренды, которые продаёт магазин.
• Партнёры и сертификаты.

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

Как лента получается бесшовной?

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

А что с доступностью?

У дублированной копии стоит aria-hidden, поэтому программа чтения с экрана читает каждый логотип только один раз. Анимация останавливается при наведении или фокусе, а для тех, кто просил меньше движения, лента неподвижна и её можно прокручивать вбок.

Можно ли использовать логотипы брендов?

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

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.

Похожие инструменты