КарточкиProНовое
Карточки стопкой при прокрутке
При прокрутке карточки ложатся одна на другую со стопкой и лёгким наклоном. Работает только на CSS sticky, без JavaScript.
Настройки
cardColor
secondaryColor
highlightColor
Основано на CSS Card Stacking (MIT лицензия) · Условия использования
Параметры
9 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| cards | { title: string; description: string; href?: string; linkLabel?: string }[] | — | Карточки стопки: заголовок, текст и ссылка. |
| aside | ReactNode | — | Закреплённый блок справа, например заголовок раздела. На телефоне скрыт. |
| height | string | "100vh" | Высота одного шага прокрутки, любая длина CSS. |
| tilt | number | 6 | Наклон карточек в градусах. Они чередуются: вправо, прямо, влево. |
| cardWidth | number | 420 | Ширина карточки в пикселях. |
| className | string | — | Дополнительные классы. |
| cardColor | string | "#a3a3a3" | Цвет второй карточки в каждой четвёрке. Текст сам становится тёмным или белым. |
| secondaryColor | string | "#262626" | Цвет третьей карточки в каждой четвёрке. |
| highlightColor | string | "#f5f5f5" | Светлый цвет первой карточки в каждой четвёрке. |
Зависимости
Пакетов: 2
npm install clsx tailwind-merge