SuperAPI AI 工具集

scroll-float

前端与建站

查看项目

更新于 10-16 06:51

技能介绍

用途:为标题或单行文案提供逐词滚动揭示动效。当整行文字进入视口时,每个单词向上漂浮后落定,呈现轻快的入场节奏。资料建议只用于一到两行文本,且位移幅度保持适度,以免干扰阅读。

主要能力:逐词依次浮现;无需第三方依赖;对 prefers-reduced-motion 等减少动效设置安全。

使用方式:复制对应的 CSS 与 JS,然后在需要动效的元素上添加 data-scroll-float 属性,例如 <h2 data-scroll-float>Your line</h2>。资料未给出更多参数、配置项或安装命令。

适用场景:页面标题、简短标语或首屏单行文字的入场动画。

限制:资料强调仅适合一到两行、且位移需克制;加载后可见性受滚动触发机制影响。其他细节暂未提供。