Stacking Panels
Панели прилипают при прокрутке и складываются в стопку. Pro · 3D и моушн › Сцены на прокрутке
Установка
npx valyro-cli@latest login
npx valyro-cli@latest add stacking-panelsnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { StackingPanels } from 'valyro-ui-pro';Пропсы
| Prop | Type | Default | |
|---|---|---|---|
offset | number | 24 | Distance from the top of the scroll area at which the first panel pins, px. |
peek | number | 16 | How much lower each next panel pins, so the edges of the ones underneath peek out, px. |
gap | number | 32 | Space between the panels before they stack, px. |
shrink | number | 0.05 | How much a panel shrinks for each panel lying on it: 0.05 is 5%. |
dim | number | 0.16 | How much a panel darkens for each panel lying on it, 0–1. |
tilt | number | 3 | How far a panel tips back for each panel lying on it, degrees. |
Похожие компоненты
- Scroll Cylinder — Строки заголовка на вращающемся цилиндре — поворот от прокрутки
- Helix Rail — Карточки на спирали, которая вращается от прокрутки
- Scroll Scene — Сцена на прокрутке: закреплённый экран меняет картинку по шагам, шкала прогресса
- Parallax Layers — Слои глубины, которые сдвигаются от прокрутки и курсора
- Reveal — Появление любого компонента при прокрутке: подъём, наплыв, 3D-разворот
- Stagger — Списки, сетки и строки таблиц появляются волной, один за другим
- Tilt — Наклон, подъём, блик и притяжение под курсором для любой карточки
- Layout Group — Перестановка без прыжков: фильтр, сортировка, перестроение сетки
- Presence — Появление и уход: элемент живёт, пока проигрывается выход
- Scene Backdrop — WebGL- или CSS-сцена под обычным интерфейсом: hero, карточки, дашборд
- Orbit Showcase — 3D-кольцо карточек: перетаскивание с инерцией, стрелки, клавиатура
- Coverflow Carousel — 3D-карусель товаров на нативной прокрутке: свайп с инерцией, стрелки, клавиатура
Назад: Scroll Cylinder · Далее: Helix Rail · Весь раздел «3D и моушн»