メニュー
Create on-scroll animation triggers using IntersectionObserver with Tailwind-friendly animation classes and keyframes. Use for scroll-reveal, animate-on-scroll, or sequencing element animations when entering the viewport.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Interact with Hermes Agent's OpenAI-compatible API for multi-model conversations, skill management, and scheduled tasks
Generate and manage Docker Compose stacks via the better-openclaw API
Deploy and manage a self-hosted Tailscale control server (Headscale) for zero-trust private networking and secure access to your stack.
A specialized skill workflow instructing you to use Serper (for discovery) and any configured Browser Automation provider (Hyperbrowser, Browseruse, Lightpanda, or Browserless) to scrape official documentation and teach yourself new technical skills.
Instructions for utilizing the HexStrike AI MCP Server for automated pentesting and security research.
Instructions for managing the PentAGI autonomous AI agent system for complex penetration testing tasks.
| name | animation-on-scroll |
| description | Create on-scroll animation triggers using IntersectionObserver with Tailwind-friendly animation classes and keyframes. Use for scroll-reveal, animate-on-scroll, or sequencing element animations when entering the viewport. |
| metadata | {"openclaw":{"emoji":"📜","source":"https://github.com/MengTo/Skills"}} |
<head> after the keyframesanimate-on-scroll to elements<script>
(function () {
const style = document.createElement("style");
style.textContent = `
.animate-on-scroll { animation-play-state: paused !important; }
.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));
};
document.addEventListener("DOMContentLoaded", () => initInViewAnimations());
})();
</script>
@keyframes animationIn {
0% { opacity: 0; transform: translateY(30px); filter: blur(8px); }
100% { opacity: 1; transform: translateY(0); filter: blur(0px); }
}
<div class="animate-on-scroll [animation:animationIn_0.8s_ease-out_0.1s_both]">...</div>
threshold and rootMargin for earlier/later revealsonce = false for replay on re-entrytranslateY and blur in keyframes