Execute qualquer Skill no Manus
com um clique

Execute qualquer Skill no Manus com um clique

Começar

animation-on-scroll

Estrelas0

Forks0

Atualizado9 de julho de 2026 às 05:04

用 IntersectionObserver 创建滚动触发动画，配 Tailwind 友好的动画类与 keyframes。当被要求做滚动显现、animate-on-scroll，或在元素进入视口时对其动画进行排序时使用。

Instalação

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Executar no Manus

Fonte

shushuitie2017

shushuitie2017/design-agent-skills

Abrir repositório GitHub Ver repositórios do creator

Download

Executar no Manus

Ocupações relacionadasSOC

Baseado na classificação ocupacional SOC

Desenvolvedores webInformática e Matemática·SOC 15-1254

SKILL.md

readonly

name	animation-on-scroll
description	用 IntersectionObserver 创建滚动触发动画，配 Tailwind 友好的动画类与 keyframes。当被要求做滚动显现、animate-on-scroll，或在元素进入视口时对其动画进行排序时使用。

Animation On Scroll 技能

工作流程

确认动画风格、时机，以及动画应运行一次还是重复。
提供 keyframes + JS observer 片段，以及要应用的确切 Tailwind 类。
只提供聚焦的微调（threshold、rootMargin、duration、delay、transform/blur 值）。

使用检查清单

把 JS 片段插入 <head>，放在 keyframes 之后。
给元素添加动画类与 animate-on-scroll。
确保你的 keyframes 名称与 Tailwind 动画引用匹配。

IntersectionObserver 触发器

<script>
  /*
    Sequence animation on scroll when visible. Requires Animation Keyframe. Usage:

    1) Insert this code in the <head> along with the Animation Keyframe code.

    2) Add to Tailwind Classes: [animation:animationIn_0.8s_ease-out_0.1s_both] animate-on-scroll
  */
  (function () {
    // Inject CSS for paused/running states
    const style = document.createElement("style");
    style.textContent = `
      /* Default: paused */
      .animate-on-scroll { animation-play-state: paused !important; }
      /* Activated by JS */
      .animate-on-scroll.animate { animation-play-state: running !important; }
    `;
    document.head.appendChild(style);

    const once = true;

    if (!window.__inViewIO) {
      window.__inViewIO = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("animate");
            if (once) window.__inViewIO.unobserve(entry.target);
          }
        });
      }, { threshold: 0.2, rootMargin: "0px 0px -10% 0px" });
    }

    window.initInViewAnimations = function (selector = ".animate-on-scroll") {
      document.querySelectorAll(selector).forEach((el) => {
        window.__inViewIO.observe(el); // observing twice is a no-op
      });
    };

    document.addEventListener("DOMContentLoaded", () => initInViewAnimations());
  })();
</script>

Keyframes

<style>
  /*
    Sequence animation intro. Usage:

    1) Insert this code in the <head>

    2) Add to Tailwind Classes: [animation:animationIn_0.8s_ease-out_0.1s_both]
  */
  @keyframes animationIn {
    0% {
      opacity: 0;
      transform: translateY(30px);
      filter: blur(8px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0px);
    }
  }
</style>

Tailwind 示例

<div class="animate-on-scroll [animation:animationIn_0.8s_ease-out_0.1s_both]">
  ...
</div>

定制旋钮

触发：调整 threshold 与 rootMargin 以更早/更晚显现。
重复：设 once = false 以允许重新进入时重播。
动效：微调 keyframes 里的 translateY 与 blur。
时机：改 Tailwind 动画值里的 duration 与 delay。

常见坑

忘记在 JS 片段之前放入 keyframes。
用了与 Tailwind 动画不同的 keyframe 名称。
因元素在 observer 初始化前已在视口内，导致动画不运行。

规格缺失时该问的问题

动画应运行一次，还是元素每次重新进入都运行？
应在进入视口前多远开始？
你想要什么动效风格（淡入、滑动、模糊、缩放）？

Mais deste repositório

mesmo repositório

audit-verify-explain-grade-5

shushuitie2017/design-agent-skills

审计工作、用具体证据核验声明，并用五年级生也能懂的简单语言解释结果。当用户要求 review、审计、检查、核验、解释一处改动、解释一处修复、总结测试结果、验证某个东西是否有效，或把技术性发现翻译成给非技术读者看的大白话时使用。

2026-07-090

copywriting

shushuitie2017/design-agent-skills

当用户想为任何页面撰写、重写或改进营销文案时使用——包括首页、落地页、定价页、功能页、关于页或产品页。也在用户说"write copy for""improve this copy""rewrite this page""marketing copy""headline help""CTA copy""value proposition""tagline""subheadline""hero section copy""above the fold""this copy is weak""make this more compelling"或"help me describe my product"时使用。只要有人在处理需要说服或转化的网站文本，就用它。邮件文案见 email-sequence；弹窗文案见 popup-cro；编辑已有文案见 copy-editing。

2026-07-090

customer-email-draft-threads

shushuitie2017/design-agent-skills

仅起草的 Gmail 客户支持分诊，并为每封草稿创建对应的 Codex 项目线程。当用户要求运行客户邮件自动化、检查未读/最近的支持邮件、准备 Gmail 草稿回复、对客户/个人邮件分诊同时跳过自动化邮件，或为已起草邮件的跟进创建 agent/项目线程时使用。

2026-07-090

customer-support-verification

shushuitie2017/design-agent-skills

对照适用的操作手册、草稿安全、证据、改动（mutation）和提交范围要求，核验客户支持工作。在每次 Gmail/客户支持分诊、账单/取消/退款/账户/访问权限调查、支持交接或草稿复核任务之后、给出最终回复之前使用；也在用户要求对照操作手册、清单、skill 或要求来核验支持工作时使用。

2026-07-090

daily-ui-inspiration-capture

shushuitie2017/design-agent-skills

创建一份周期性的每日 UI 灵感采集。当用户要求运行、刷新、打包或校验带日期的 UI 灵感集时使用，尤其针对 `articles/YYYY-MM-DD-ui-inspiration-capture/` 产物、Framer/Dribbble 落地页灵感、动效研究截图/视频、AI-builder 提示词、重复检查，或把项目操作手册转成可重复的工作流程。

2026-07-090

elevenlabs-tts

shushuitie2017/design-agent-skills

使用本地语音配置，从脚本或内联文本生成 ElevenLabs 文本转语音音频。当用户要 ElevenLabs、text-to-speech、TTS、旁白、配音、语音音频或语音生成时使用；语音名称、voice id、邮箱、所有者和账户特定默认值只从 skill 之外的本地配置载入。

2026-07-090

name	animation-on-scroll
description	用 IntersectionObserver 创建滚动触发动画，配 Tailwind 友好的动画类与 keyframes。当被要求做滚动显现、animate-on-scroll，或在元素进入视口时对其动画进行排序时使用。

Animation On Scroll 技能

工作流程

确认动画风格、时机，以及动画应运行一次还是重复。
提供 keyframes + JS observer 片段，以及要应用的确切 Tailwind 类。
只提供聚焦的微调（threshold、rootMargin、duration、delay、transform/blur 值）。

使用检查清单

把 JS 片段插入 <head>，放在 keyframes 之后。
给元素添加动画类与 animate-on-scroll。
确保你的 keyframes 名称与 Tailwind 动画引用匹配。

IntersectionObserver 触发器

<script>
  /*
    Sequence animation on scroll when visible. Requires Animation Keyframe. Usage:

    1) Insert this code in the <head> along with the Animation Keyframe code.

    2) Add to Tailwind Classes: [animation:animationIn_0.8s_ease-out_0.1s_both] animate-on-scroll
  */
  (function () {
    // Inject CSS for paused/running states
    const style = document.createElement("style");
    style.textContent = `
      /* Default: paused */
      .animate-on-scroll { animation-play-state: paused !important; }
      /* Activated by JS */
      .animate-on-scroll.animate { animation-play-state: running !important; }
    `;
    document.head.appendChild(style);

    const once = true;

    if (!window.__inViewIO) {
      window.__inViewIO = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("animate");
            if (once) window.__inViewIO.unobserve(entry.target);
          }
        });
      }, { threshold: 0.2, rootMargin: "0px 0px -10% 0px" });
    }

    window.initInViewAnimations = function (selector = ".animate-on-scroll") {
      document.querySelectorAll(selector).forEach((el) => {
        window.__inViewIO.observe(el); // observing twice is a no-op
      });
    };

    document.addEventListener("DOMContentLoaded", () => initInViewAnimations());
  })();
</script>

Keyframes

<style>
  /*
    Sequence animation intro. Usage:

    1) Insert this code in the <head>

    2) Add to Tailwind Classes: [animation:animationIn_0.8s_ease-out_0.1s_both]
  */
  @keyframes animationIn {
    0% {
      opacity: 0;
      transform: translateY(30px);
      filter: blur(8px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0px);
    }
  }
</style>

Tailwind 示例

<div class="animate-on-scroll [animation:animationIn_0.8s_ease-out_0.1s_both]">
  ...
</div>

定制旋钮

触发：调整 threshold 与 rootMargin 以更早/更晚显现。
重复：设 once = false 以允许重新进入时重播。
动效：微调 keyframes 里的 translateY 与 blur。
时机：改 Tailwind 动画值里的 duration 与 delay。

常见坑

忘记在 JS 片段之前放入 keyframes。
用了与 Tailwind 动画不同的 keyframe 名称。
因元素在 observer 初始化前已在视口内，导致动画不运行。

规格缺失时该问的问题

动画应运行一次，还是元素每次重新进入都运行？
应在进入视口前多远开始？
你想要什么动效风格（淡入、滑动、模糊、缩放）？