ScrambleText
字符先以发光乱码闪烁,再从左到右依次定格为原文,呈现解码般的科技感。支持进入视口或悬停触发。
Customize
强调色
#22d3eeProps
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
children | string | — | 需要解码显现的文本 |
trigger | 'view' | 'hover' | 'view' | 进入视口时播放,或指针悬停 / 聚焦时播放 |
speed | number | 40 | 乱码刷新间隔(毫秒) |
stagger | number | 60 | 相邻字符依次定格的间隔(毫秒) |
characters | string | 'A-Z 0-9 !<>-_…' | 乱码使用的字符池 |
accentColor | string | '#22d3ee' | 乱码字符的颜色与辉光,也可用 CSS 变量 --elyri-scramble-accent 覆盖 |
glow | number | 1 | 乱码辉光强度倍率,0 为关闭,也可用 CSS 变量 --elyri-scramble-glow 覆盖 |
once | boolean | true | 视口模式下是否只在首次进入时触发 |
className | string | — | 自定义类名 |
依赖
IntersectionObserver