SuperAPI AI 工具集

masked-reveal

通用与其它

查看项目

更新于 10-15 21:09

技能介绍

Masked Reveal 用于让标题或短文本块在滚动时呈现逐词上升的显现效果,单词从不可见遮罩下方依次上移。适合已使用 GSAP 或需要基于 ScrollTrigger 动效的项目,应用于短标题、标签、章节引言等,避免用于长段落。

默认动效参数:触发点为文本顶部到达视口 82% 时;时长 0.7s 至 0.9s;每词错开 0.025s 至 0.045s;位移 yPercent 从 110 到 0;缓动为 power3.out 或 expo.out;默认只显现一次。

用法:为目标元素添加 class="masked-reveal" 与 data-masked-reveal 属性;CSS 在 html.js 下先隐藏元素,切分后通过 .is-split 恢复可见,.word-mask 使用 overflow:hidden,.word 初始 translateY(110%)。脚本注册 ScrollTrigger 后,用辅助函数按空格切分文本(保留空格),为每词包裹 .word-mask 与 .word 并设置 aria-label 保留原文,再以 gsap.fromTo 驱动 yPercent 动画。React 中可用 useLayoutEffect 配合 gsap.context,并在清理时调用 ctx.revert()。

限制与注意:支持 prefers-reduced-motion 的用户直接显示静态文本;不要用于含链接、按钮或有效内联标记的文本;若换行关键,需在字体加载后初始化;图片延迟加载或布局变化后调用 ScrollTrigger.refresh();SPA 路由中需清理 ScrollTrigger;错开按词而非按字母。