SuperAPI AI 工具集

fade-in-up

前端与建站

查看项目

更新于 10-16 01:36

技能介绍

用途:fade-in-up 提供一种干净的“上移+淡入”入场效果,在页面加载时触发,属于 motion-anything 项目,并遵循 MOTION-SPEC.md。

主要能力:元素在首次绘制时上移并淡入;支持可选的错峰延迟,未指定时自动错峰。

适用场景:首屏主视觉内容,以及少量关键元素在首次绘制时出现。

不适用场景:长列表或屏外内容,这类应改用 scroll-reveal。不要将必读内容延迟超过约 300ms,错峰元素保持在 ≤3 个。

使用方式:复制 fade-in-up.css 和 fade-in-up.js 并链接它们;用 data-fade 标记元素,例如 <h1 data-fade>…</h1>,可选 data-fade-delay="80",否则自动错峰。

无障碍与性能:在 prefers-reduced-motion 下立即显示;仅使用 transform 与 opacity。

限制:资料未提供更多平台、框架或安装命令信息。