SuperAPI AI 工具集

animation-on-scroll

设计与创作

查看项目

更新于 10-15 21:09

技能介绍

用途:为网页元素添加滚动进入视口时的动画触发,使用 IntersectionObserver 监听可见性,配合 Tailwind 动画类与自定义关键帧实现淡入、上移、模糊等效果。

主要能力:提供关键帧与 JS 观察器代码片段,以及需要应用的 Tailwind 类;支持设置动画只播放一次或每次重新进入都播放;可调整触发阈值(threshold)、rootMargin、时长、延迟以及位移和模糊数值。

使用方式:将关键帧代码和 JS 片段插入 <head>,关键帧需在 JS 之前;给元素添加 animate-on-scroll 类及 Tailwind 动画类,例如 [animation:animationIn_0.8s_ease-out_0.1s_both];确保关键帧名称与 Tailwind 动画引用一致。JS 默认 once = true,改为 false 可重复播放。

适用场景:需要滚动揭示效果的页面区块、列表项或卡片。

限制与注意:若元素在观察器初始化前已处于视口内,动画可能不运行;关键帧名称不匹配或未先引入关键帧会导致动画失效。资料未提供具体安装命令、收费或平台信息。