Reveal
Оберните что угодно — появится при прокрутке: с любой стороны, с размытием и масштабом, блоком или по дочерним элементам.
зависимости 0файлы tsx + cssпараметры 8react 18+
01План
02Сборка
03Релиз
X 0000 Y 0000
Пульт08 параметров
01from
С какой стороны появляется.
02distance
px
Дистанция сдвига.
03blur
px
Начальное размытие.
04scale
Начальный масштаб.
05duration
ms
Длительность анимации.
06delay
ms
Задержка перед стартом.
07stagger
ms
Задержка между дочерними элементами; 0 — весь блок разом.
08ease
Кривая сглаживания.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
from | 'bottom' | 'top' | 'left' | 'right' | 'none' | "bottom" | С какой стороны появляется. |
distance | number | 40 | Дистанция сдвига. |
blur | number | 6 | Начальное размытие. |
scale | number | 1 | Начальный масштаб. |
duration | number | 800 | Длительность анимации. |
delay | number | 0 | Задержка перед стартом. |
stagger | number | 120 | Задержка между дочерними элементами; 0 — весь блок разом. |
ease | 'smooth' | 'snappy' | 'bounce' | 'linear' | "smooth" | Кривая сглаживания. |
threshold | number | 0.15 | Какая доля должна быть видна для старта. |
once | boolean | true | Анимировать только в первый раз. |
as | ElementType | 'div' | Какой элемент рендерить. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |