AN — Анимации№ 021

Logo Loop

Бесконечная лента логотипов клиентов, партнёров или вашего стека. Встаёт на паузу при наведении и растворяется по краям.

зависимости 0файлы tsx + cssпараметры 9react 18+

live/logo-loop

X 0000 Y 0000

Пульт09 параметров

01logos

Только для демо: текстовые логотипы.

02speed

px/s

Скорость прокрутки.

03direction

Направление прокрутки.

04gap

Расстояние между логотипами.

05size

Высота логотипа.

06pauseOnHover

Останавливать при наведении.

07scaleOnHover

Увеличивать логотип под курсором.

08fadeEdges

Растворять к краям.

09fadeWidth

Ширина растворения у краёв.

01 Пропсы

Проп	Тип	По умолчанию	Описание
`logos`	`string[]`	`["React","TypeScript","Expo","Next.js","NestJS","PostgreSQL","Docker"]`	Только для демо: текстовые логотипы.
`speed`	`number`	`60`	Скорость прокрутки.
`direction`	`'left' \| 'right'`	`"left"`	Направление прокрутки.
`gap`	`number`	`56`	Расстояние между логотипами.
`size`	`number`	`28`	Высота логотипа.
`pauseOnHover`	`boolean`	`true`	Останавливать при наведении.
`scaleOnHover`	`boolean`	`false`	Увеличивать логотип под курсором.
`fadeEdges`	`boolean`	`true`	Растворять к краям.
`fadeWidth`	`number`	`12`	Ширина растворения у краёв.
`items`	`LogoLoopItem[]`	—	{ node, label, href? } — node может быть <img>, SVG или текстом.
`ariaLabel`	`string`	`'Logos'`	Доступное имя ленты для скринридеров.
`className`	`string`	—	Передаётся корневому элементу.
`style`	`CSSProperties`	—	Передаётся корневому элементу.