АнимацииProНовое
Параллакс за курсором
Картинки разбросаны по экрану и сдвигаются за курсором с разной глубиной, будто висят в пространстве. Яркий первый экран для портфолио.
Настройки
color
accentColor
highlightColor
Основано на Parallax Floating (MIT лицензия) · Условия использования
Параметры
8 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| children | ReactNode | — | Элементы FloatingElement с картинками или блоками. |
| sensitivity | number | 1 | Сила сдвига. Отрицательное значение двигает элементы против курсора. |
| easingFactor | number | 0.05 | Плавность догоняния: меньше значит мягче. |
| FloatingElement.depth | number | 1 | Глубина конкретного элемента: чем больше, тем сильнее он двигается. |
| color | string | "#ffffff" | Основной цвет. Элементы внутри берут его через var(--parallax-c1). |
| accentColor | string | "#737373" | Второй цвет. Элементы внутри берут его через var(--parallax-c2). |
| highlightColor | string | "#e5e5e5" | Светлый цвет для бликов. Элементы внутри берут его через var(--parallax-c3). |
| className | string | — | Дополнительные классы. |
Зависимости
Пакетов: 3
npm install motion clsx tailwind-merge