Scroll Stack
Карточки прилипают при прокрутке и складываются в стопку; нижние уменьшаются и темнеют. Работает на странице и в любом прокручиваемом блоке.
зависимости 0файлы tsx + cssпараметры 7react 18+
Как идёт проект ↓
01Исследование
Цели, пользователи, ограничения — записаны до первой строки кода.
02Дизайн
Сценарии и экраны, а анимация продумана заранее, а не прикручена потом.
03Разработка
Маленькие релизы, реальные устройства, замеренная скорость.
04Запуск
Сторы, аналитика и отчёты о сбоях — и следующая итерация.
X 0000 Y 0000↳ Прокрутите внутри превью
Пульт07 параметров
01stickyTop
px
Где прилипает первая карточка.
02stackOffset
px
Сдвиг каждой следующей карточки в стопке.
03gap
px
Расстояние между карточками до стопки.
04scaleStep
Насколько уменьшается перекрытая карточка.
05dim
Насколько темнеет перекрытая карточка.
06cardHeight
px
Минимальная высота карточки.
07radius
px
Скругление углов.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
stickyTop | number | 40 | Где прилипает первая карточка. |
stackOffset | number | 16 | Сдвиг каждой следующей карточки в стопке. |
gap | number | 120 | Расстояние между карточками до стопки. |
scaleStep | number | 0.06 | Насколько уменьшается перекрытая карточка. |
dim | number | 0.35 | Насколько темнеет перекрытая карточка. |
cardHeight | number | 260 | Минимальная высота карточки. |
radius | number | 24 | Скругление углов. |
items | ReactNode[] | — | Содержимое карточек; оформляйте как угодно. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |