Scroll Effect
Двадцать четыре эффекта прокрутки — появления, параллакс, полоса прогресса, липкие карточки стопкой, горизонтальная лента, заливка текста — на scroll-driven таймлайнах. Бесплатно, MIT · 3D и моушн › Моушн для любых компонентов
Установка
npx valyro-cli@latest add scroll-effectnpx shadcn@latest add https://valyro.xyz/r/scroll-effect.jsonnpm install valyro-ui
import 'valyro-ui/styles.css';
import { ScrollEffect } from 'valyro-ui';Пропсы
| Prop | Type | Default | |
|---|---|---|---|
preset | ScrollEffectPreset | 'fade-up' | How the content answers the scroll: enters as it scrolls into view (fade-up, scale-in…), follows the scroll while it passes (parallax, progress, stack, horizontal, text-fill…) or leaves as it scrolls out at the top (fade-out…). Seven presets are free; the other seventeen need ValyroUI Pro. |
strength | number | 1 | Multiplies the preset's travel, turn, zoom and blur: 0.5 is half as far, 2 twice as far. |
range | [ScrollRangePoint, ScrollRangePoint] | The stretch of the scroll that plays it, in CSS animation-range terms: ['entry 0%', 'cover 50%']. Default: the preset's own. | |
tier | PageTransitionTierSetting | 'auto' | gpu — the full preset; cpu — its one-layer variant for machines that composite on the processor (virtual machines, remote desktops, software WebGL); auto — cpu on such machines and on devices with two cores or 2 GB of memory or less, detected while the browser is idle; gpu elsewhere. |
disabled | boolean | false | Off: the content stays at rest and nothing is animated. |
Похожие компоненты
- Reveal — Появление любого компонента при прокрутке: подъём, наплыв, 3D-разворот
- Stagger — Списки, сетки и строки таблиц появляются волной, один за другим
- Tilt — Наклон, подъём, блик и притяжение под курсором для любой карточки
- Layout Group — Перестановка без прыжков: фильтр, сортировка, перестроение сетки
- Presence — Появление и уход: элемент живёт, пока проигрывается выход
- Page Transition — Сорок переходов между страницами, маршрутами и шагами — куб, карусель, круг и другие — с лёгкими вариантами для машин без GPU
- Scene Backdrop — WebGL- или CSS-сцена под обычным интерфейсом: hero, карточки, дашборд
- Scroll Cylinder — Строки заголовка на вращающемся цилиндре — поворот от прокрутки
- Stacking Panels — Панели прилипают при прокрутке и складываются в стопку
- Helix Rail — Карточки на спирали, которая вращается от прокрутки
- Scroll Scene — Сцена на прокрутке: закреплённый экран меняет картинку по шагам, шкала прогресса
- Parallax Layers — Слои глубины, которые сдвигаются от прокрутки и курсора
Назад: Presence · Далее: Page Transition · Весь раздел «3D и моушн»