·scroll-reveal-libraries
$

scroll-reveal-libraries

使用 AOS(滚动动画)实现简单的滚动触发显示动画。在构建需要基本淡入淡出/幻灯片效果而无需复杂动画编排的营销页面、登陆页面或内容丰富的网站时,请使用此技能。触发涉及滚动动画、滚动触发显示、AOS、简单动画或基本滚动效果的任务。 GSAP ScrollTrigger 和 Locomotive Scroll 的替代方案,适用于更简单的用例。与 React 特定动画的 Motion-framer 进行比较。

13安装·1热度·@freshtechbro

安装

$npx skills add https://github.com/freshtechbro/claudedesignskills --skill scroll-reveal-libraries

如何安装 scroll-reveal-libraries

通过命令行快速安装 scroll-reveal-libraries AI 技能到你的开发环境

  1. 打开终端: 打开你的终端或命令行工具(如 Terminal、iTerm、Windows Terminal 等)
  2. 运行安装命令: 复制并运行以下命令:npx skills add https://github.com/freshtechbro/claudedesignskills --skill scroll-reveal-libraries
  3. 验证安装: 安装完成后,技能将自动配置到你的 AI 编程环境中,可以在 Claude Code、Cursor 或 OpenClaw 中使用

来源:freshtechbro/claudedesignskills。

SKILL.md

查看原文

This skill covers AOS (Animate On Scroll), a lightweight CSS-driven library for scroll-triggered animations. AOS excels at simple fade, slide, and zoom effects activated when elements enter the viewport.

Problem: AOS doesn't detect elements on first render or route changes.

Solution: Initialize in useEffect and refresh on route/content changes:

使用 AOS(滚动动画)实现简单的滚动触发显示动画。在构建需要基本淡入淡出/幻灯片效果而无需复杂动画编排的营销页面、登陆页面或内容丰富的网站时,请使用此技能。触发涉及滚动动画、滚动触发显示、AOS、简单动画或基本滚动效果的任务。 GSAP ScrollTrigger 和 Locomotive Scroll 的替代方案,适用于更简单的用例。与 React 特定动画的 Motion-framer 进行比较。 来源:freshtechbro/claudedesignskills。

可引用信息

为搜索与 AI 引用准备的稳定字段与命令。

安装命令
npx skills add https://github.com/freshtechbro/claudedesignskills --skill scroll-reveal-libraries
分类
$商业营销
认证
收录时间
2026-03-09
更新时间
2026-03-10

Browse more skills from freshtechbro/claudedesignskills

快速解答

什么是 scroll-reveal-libraries?

使用 AOS(滚动动画)实现简单的滚动触发显示动画。在构建需要基本淡入淡出/幻灯片效果而无需复杂动画编排的营销页面、登陆页面或内容丰富的网站时,请使用此技能。触发涉及滚动动画、滚动触发显示、AOS、简单动画或基本滚动效果的任务。 GSAP ScrollTrigger 和 Locomotive Scroll 的替代方案,适用于更简单的用例。与 React 特定动画的 Motion-framer 进行比较。 来源:freshtechbro/claudedesignskills。

如何安装 scroll-reveal-libraries?

打开你的终端或命令行工具(如 Terminal、iTerm、Windows Terminal 等) 复制并运行以下命令:npx skills add https://github.com/freshtechbro/claudedesignskills --skill scroll-reveal-libraries 安装完成后,技能将自动配置到你的 AI 编程环境中,可以在 Claude Code、Cursor 或 OpenClaw 中使用

这个 Skill 的源码在哪?

https://github.com/freshtechbro/claudedesignskills