Scramble Text
Проявляет текст из случайных символов — при наведении, при появлении на экране или по кругу.
зависимости 0файлы tsx + cssпараметры 7react 18+
РАСШИФРОВКА СИГНАЛА
X 0000 Y 0000↳ Наведите на текст или коснитесь его
Пульт07 параметров
01text
Итоговый текст.
02trigger
Что запускает эффект.
03speed
ms
Время между кадрами.
04sequential
Проявлять символы по одному.
05revealFrom
Откуда начинается проявление.
06scrambleFrames
Кадров шума до остановки (не по порядку).
07characters
Набор символов для шума.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
text | string | "РАСШИФРОВКА СИГНАЛА" | Итоговый текст. |
trigger | 'hover' | 'view' | 'loop' | "hover" | Что запускает эффект. |
speed | number | 45 | Время между кадрами. |
sequential | boolean | true | Проявлять символы по одному. |
revealFrom | 'start' | 'end' | 'center' | 'random' | "start" | Откуда начинается проявление. |
scrambleFrames | number | 12 | Кадров шума до остановки (не по порядку). |
characters | string | "АБВГДЕЖЗИКЛМНОПРСТУФХЦЧШЭЮЯ0123456789#%&*+=/<>" | Набор символов для шума. |
loopDelay | number | 1600 | Пауза между повторами, мс. |
scrambledClassName | string | — | Класс для символов, которые ещё шумят. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |