用途:让一行短标题从随机字符逐步解码显现,营造科技或未来感,也可在同一行循环切换几句话;仅用于 hero 词或短标题,不适合长文本、正文,以及偏平静、编辑、奢华调性的场景。
主要能力:自动在加载时播放 data-text 指定文本;可通过 scrambleTo(el, "next phrase") 更换短语;在 prefers-reduced-motion 下直接显示最终文本,不做乱码动画;解析后的 data-text 始终是真实内容,利于可访问性;通过 rAF 交换文本内容,保持短行更省性能。
使用方式:将 text-scramble.js 复制到项目并引入;标记元素,例如 <span class="scramble" data-text="motion, anything"></span>;框架方面,React 可保留 ref,并在挂载或短语变化时调用 scrambleTo(ref.current, text)。
适用场景:技术或未来风格的 hero 词、短标题,或一行内多短语轮换。
限制:长文本或正文在乱码时难以阅读,故只限一行短文本;平静、编辑、奢华调性使用会显得花哨;资料中未提供更多安装命令、收费与平台细节,暂未提供。