Scroll Reveal
Слова проступают из размытия по мере чтения — привязано к прокрутке, поэтому при возврате они снова гаснут.
зависимости 0файлы tsx + cssпараметры 5react 18+
Листайте ↓
X 0000 Y 0000↳ Прокрутите внутри превью
Пульт05 параметров
01text
Текст.
02baseOpacity
Прозрачность слова до проявления.
03blur
px
Размытие слова до проявления.
04start
Старт, когда верх текста доходит до этой точки экрана.
05end
Финиш, когда низ текста доходит до этой точки.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
text | string | "Хороший интерфейс кажется очевидным. Чтобы к этому прийти, нужна сотня мелких решений, которых никто не замечает, — и в этом весь смысл." | Текст. |
baseOpacity | number | 0.15 | Прозрачность слова до проявления. |
blur | number | 4 | Размытие слова до проявления. |
start | number | 0.9 | Старт, когда верх текста доходит до этой точки экрана. |
end | number | 0.45 | Финиш, когда низ текста доходит до этой точки. |
as | ElementType | 'p' | Какой элемент рендерить. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |