Scroll Scene
Сцена на прокрутке: закреплённый экран меняет картинку по шагам, шкала прогресса. Pro · 3D и моушн › Сцены на прокрутке
Установка
npx valyro-cli@latest login
npx valyro-cli@latest add scroll-scenenpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { ScrollScene } from 'valyro-ui-pro';Пропсы
| Prop | Type | Default | |
|---|---|---|---|
steps * | ScrollSceneStep[] | The chapters: each has its text and the visual the stage shows while it is read. | |
layout | 'split' | 'overlay' | 'split' | split — text beside a pinned stage; overlay — text cards scroll over a full-width pinned stage. |
transition | 'fade' | 'slide' | 'zoom' | 'flip' | 'fade' | How the stage changes from one visual to the next. |
stageHeight | number | string | 'min(72vh, 520px)' | Height of the pinned stage, px or any CSS length. |
offset | number | 24 | Distance from the top of the scroll area at which the stage pins, px. |
rail | boolean | true | Shows the rail: overall progress and a button per step. |
headingLevel | 2 | 3 | 4 | 3 | Heading level of the step titles. |
onStepChange | (index: number) => void | Called when another step becomes the one being read. | |
labels | Partial<ScrollSceneLabels> | Text for the rail. |
Похожие компоненты
- Scroll Cylinder — Строки заголовка на вращающемся цилиндре — поворот от прокрутки
- Stacking Panels — Панели прилипают при прокрутке и складываются в стопку
- Helix Rail — Карточки на спирали, которая вращается от прокрутки
- Parallax Layers — Слои глубины, которые сдвигаются от прокрутки и курсора
- Reveal — Появление любого компонента при прокрутке: подъём, наплыв, 3D-разворот
- Stagger — Списки, сетки и строки таблиц появляются волной, один за другим
- Tilt — Наклон, подъём, блик и притяжение под курсором для любой карточки
- Layout Group — Перестановка без прыжков: фильтр, сортировка, перестроение сетки
- Presence — Появление и уход: элемент живёт, пока проигрывается выход
- Scene Backdrop — WebGL- или CSS-сцена под обычным интерфейсом: hero, карточки, дашборд
- Orbit Showcase — 3D-кольцо карточек: перетаскивание с инерцией, стрелки, клавиатура
- Coverflow Carousel — 3D-карусель товаров на нативной прокрутке: свайп с инерцией, стрелки, клавиатура
Назад: Helix Rail · Далее: Parallax Layers · Весь раздел «3D и моушн»