Parallax Layers

Слои глубины, которые сдвигаются от прокрутки и курсора. Pro · 3D и моушн › Сцены на прокрутке

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add parallax-layers

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { ParallaxLayers } from 'valyro-ui-pro';

Пропсы

Prop	Type	Default
`scroll`	`boolean`	`true`	Layers shift with the scroll while the scene crosses the viewport.
`pointer`	`boolean`	`true`	Layers shift towards a mouse or pen over the scene.
`strength`	`number`	`40`	How far a layer of depth 1 travels at the extremes, px.
`height`	`number \| string`		Height of the scene, px or any CSS length. Default: the tallest layer.

Похожие компоненты

Scroll Cylinder — Строки заголовка на вращающемся цилиндре — поворот от прокрутки
Stacking Panels — Панели прилипают при прокрутке и складываются в стопку
Helix Rail — Карточки на спирали, которая вращается от прокрутки
Scroll Scene — Сцена на прокрутке: закреплённый экран меняет картинку по шагам, шкала прогресса
Reveal — Появление любого компонента при прокрутке: подъём, наплыв, 3D-разворот
Stagger — Списки, сетки и строки таблиц появляются волной, один за другим
Tilt — Наклон, подъём, блик и притяжение под курсором для любой карточки
Layout Group — Перестановка без прыжков: фильтр, сортировка, перестроение сетки
Presence — Появление и уход: элемент живёт, пока проигрывается выход
Scene Backdrop — WebGL- или CSS-сцена под обычным интерфейсом: hero, карточки, дашборд
Orbit Showcase — 3D-кольцо карточек: перетаскивание с инерцией, стрелки, клавиатура
Coverflow Carousel — 3D-карусель товаров на нативной прокрутке: свайп с инерцией, стрелки, клавиатура

Назад: Scroll Scene · Далее: Orbit Showcase · Весь раздел «3D и моушн»