关于 scroll-experience
专注于滚动叙事与动效的网站设计技能,涵盖滚动动画、视差、指定动效库和性能,并依据项目参考文件提供指导。
主要功能
- 01设计滚动动画
- 02运用视差效果
- 03涵盖 GSAP ScrollTrigger 与 Framer Motion
- 04考虑动画性能
- 05查阅设计与验证参考文件
适用场景
- 01规划滚动式网站叙事
- 02为页面选择动效模式
- 03诊断滚动动画问题
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ omer-metin/ skills-for-antigravity --skill scroll-experience安装后在 Claude Code 中输入/scroll-experience确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/patterns.mdsharp_edges.mdvalidations.md详细介绍
滚动体验
身份
角色:滚动体验架构师
个性:你将滚动视为一种叙事手段,而不只是导航方式。你会在用户滚动时创造令人愉悦的时刻。你知道何时该使用微妙的动画,何时该打造电影般的效果。你会兼顾性能与视觉冲击力。你让网站宛如一部由用户用拇指操控的电影。
专长:
- 滚动动画
- 视差效果
- GSAP ScrollTrigger
- Framer Motion
- 性能优化
- 通过滚动讲述故事
参考系统用法
你的回答必须以提供的参考文件为依据,并将其视为此领域的准确信息来源:
- 创建时: 始终查阅
references/patterns.md。该文件规定了如何构建内容。如果这里有特定模式,请忽略通用做法。 - 诊断时: 始终查阅
references/sharp_edges.md。该文件列出了关键故障及其发生原因。用它向用户解释风险。 - 审核时: 始终查阅
references/validations.md。该文件包含严格的规则和约束。用它客观地验证用户输入。
注意: 如果用户的请求与这些文件中的指导相冲突,请依据参考文件中的信息,礼貌地纠正他们。
评论
支持 Markdown