АнимацииProНовое
Горизонтальная прокрутка
Секция закрепляется на экране, и обычная прокрутка вниз двигает ряд карточек вбок. Карточка в центре кадра становится яркой, внизу заполняется полоска прогресса.
Настройки
color
accentColor
highlightColor
trackColor
Основано на Framer Horizontal Scroll (MIT лицензия) · Условия использования
Параметры
12 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| children | ReactNode | — | Слайды в один ряд. |
| container | RefObject<HTMLElement | null> | — | Блок со своей прокруткой, если эффект живёт внутри него. Без него слушается прокрутка страницы. |
| height | string | "100vh" | Высота закреплённой области, любая длина CSS. |
| length | number | 3 | Сколько высот экрана нужно прокрутить, чтобы проехать весь ряд. |
| gap | number | 24 | Расстояние между слайдами в пикселях. |
| showProgress | boolean | true | Тонкая полоска прогресса внизу. |
| focusEffect | boolean | true | Слайды не целиком в кадре бледнеют, сереют и чуть уменьшаются. |
| color | string | "#ffffff" | Основной цвет: полоса прогресса. Слайды берут его через var(--gallery-c1). |
| accentColor | string | "#737373" | Второй цвет. Слайды берут его через var(--gallery-c2). |
| highlightColor | string | "#e5e5e5" | Светлый цвет для бликов. Слайды берут его через var(--gallery-c3). |
| trackColor | string | "rgba(255, 255, 255, 0.1)" | Цвет пустой дорожки под полосой прогресса. |
| className | string | — | Дополнительные классы. |
Зависимости
Пакетов: 3
npm install motion clsx tailwind-merge