АнимацииProНовое
Смена первого экрана при прокрутке
Первый экран закреплён и при прокрутке уменьшается с лёгким наклоном, а следующая секция вырастает поверх него. Получается плавный переход между блоками.
Настройки
heroColor
gridColor
nextTint
heroTextColor
Основано на Sticky Hero Scroll (MIT лицензия) · Условия использования
Параметры
14 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| hero | ReactNode | — | Содержимое первого экрана, который уменьшается и наклоняется. |
| next | ReactNode | — | Содержимое следующей секции, которая вырастает поверх. |
| container | RefObject<HTMLElement | null> | — | Блок со своей прокруткой, если эффект живёт внутри него. Без него слушается прокрутка страницы. |
| height | string | "100vh" | Высота каждой секции, любая длина CSS. |
| scaleTo | number | 0.8 | До какого размера сжимается первый экран. |
| rotate | number | 5 | Наклон в градусах. |
| showGrid | boolean | true | Тонкая сетка на фоне секций. |
| heroClassName | string | — | Классы первого экрана. |
| nextClassName | string | — | Классы следующей секции. |
| heroColor | string | "#ebebeb" | Фон первого экрана. К верху он чуть темнеет. |
| gridColor | string | "rgba(79, 79, 79, 0.18)" | Цвет линий сетки. |
| nextTint | string | "rgba(255, 255, 255, 0.06)" | Свечение сверху следующей секции поверх почти чёрного фона. |
| heroTextColor | string | "#000000" | Цвет текста первого экрана. Тёмный, чтобы читался на цветном фоне. |
| className | string | — | Дополнительные классы. |
Зависимости
Пакетов: 3
npm install motion clsx tailwind-merge