Agent Skills by ALSEL
Anthropic Claudeソフトウェア開発⭐ リポ 0品質スコア 50/100

scroll-reveal-libraries

AOS（Animate On Scroll）を使用したシンプルなスクロール連動のリビールアニメーションを実装します。複雑なアニメーション制御を必要とせず、基本的なフェードやスライド効果が必要なマーケティングページ、ランディングページ、コンテンツ量の多いサイト制作時に活用してください。スクロールアニメーションやAOSに関するタスクで起動し、複雑なユースケース向けのGSAP ScrollTriggerやLocomotive Scrollの代替として、またReact向けアニメーションのmotion-framerと比較検討する際にも参照されます。

description の原文を見る

Simple scroll-triggered reveal animations using AOS (Animate On Scroll). Use this skill when building marketing pages, landing pages, or content-heavy sites requiring basic fade/slide effects without complex animation orchestration. Triggers on tasks involving scroll animations, scroll-triggered reveals, AOS, simple animations, or basic scroll effects. Alternative to GSAP ScrollTrigger and Locomotive Scroll for simpler use cases. Compare with motion-framer for React-specific animations.

SKILL.md 本文

スクロール表示ライブラリ

概要

このスキルは AOS (Animate On Scroll) をカバーしています。これは、スクロール時に要素がビューポートに入ったときに発動するシンプルなフェード、スライド、ズームエフェクト用の軽量 CSS ドリブンライブラリです。

主な機能:

  • 最小限のセットアップ: 単一の JavaScript ファイル + CSS
  • Data Attribute API: HTML で直接アニメーションを設定可能
  • パフォーマンス: CSS ドリブン、GPU アクセラレーション対応
  • 50+ のビルトインアニメーション: フェード、スライド、ズーム、フリップ
  • フレームワーク非依存: vanilla JS、React、Vue など全て対応

使用するべき場合:

  • シンプルなスクロールエフェクトのマーケティング/ランディングページ
  • コンテンツが多いサイト (ブログ、ドキュメント)
  • スクロールアニメーションが必要なクイックプロトタイプ
  • GSAP/Framer Motion の複雑さが不要なプロジェクト

使用するべきではない場合:

  • 複雑なアニメーションタイムラインまたはオーケストレーション → GSAP ScrollTrigger を使用
  • 物理ベースのアニメーション → React Spring または Framer Motion を使用
  • 正確なスクロール同期アニメーション → GSAP ScrollTrigger を使用
  • インタラクティブなヘビーアニメーション → Framer Motion を使用

基本概念

インストール

CDN (最速):

<head>
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body>
  <!-- data-aos 属性付きコンテンツ -->

  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>
</body>

NPM/Yarn (推奨):

npm install aos@next
# または
yarn add aos@next

import AOS from 'aos';
import 'aos/dist/aos.css';

AOS.init();

基本的な使い方

data-aos 属性を使ってアニメーションを適用します:

<!-- フェードイン -->
<div data-aos="fade-in">コンテンツ</div>

<!-- 下からフェードイン -->
<div data-aos="fade-up">コンテンツ</div>

<!-- 右からスライド -->
<div data-aos="slide-left">コンテンツ</div>

<!-- ズームイン -->
<div data-aos="zoom-in">コンテンツ</div>

設定オプション

グローバル設定:

AOS.init({
  // アニメーション設定
  duration: 800,  // アニメーション期間 (ms): 0-3000
  delay: 0,       // アニメーション前の遅延 (ms): 0-3000
  offset: 120,    // トリガーポイントからのオフセット (px)
  easing: 'ease', // イージング関数
  once: false,    // 一度だけアニメーション (true) するか毎回 (false) するか
  mirror: false,  // スクロール過去時にアニメーションアウト

  // 配置
  anchorPlacement: 'top-bottom', // どの位置でアニメーション発動

  // パフォーマンス
  disable: false,                // モバイル/タブレットで無効化
  startEvent: 'DOMContentLoaded', // 初期化イベント
  debounceDelay: 50,             // ウィンドウリサイズ debounce
  throttleDelay: 99              // スクロール throttle
});

要素ごとのオーバーライド:

<div
  data-aos="fade-up"
  data-aos-duration="1000"
  data-aos-delay="200"
  data-aos-offset="50"
  data-aos-easing="ease-in-out"
  data-aos-once="true"
  data-aos-mirror="true"
  data-aos-anchor-placement="center-bottom"
>
  カスタム設定済み要素
</div>

よくあるパターン

1. ランディングページのヒーローセクション

<section class="hero">
  <!-- 段階的なヘッディング -->
  <h1
    data-aos="fade-down"
    data-aos-duration="800"
  >
    ようこそ、未来へ
  </h1>

  <!-- 遅延したサブヘッディング -->
  <p
    data-aos="fade-up"
    data-aos-delay="200"
    data-aos-duration="600"
  >
    あなたのアイデアを現実に変えます
  </p>

  <!-- CTA ボタン -->
  <button
    data-aos="zoom-in"
    data-aos-delay="400"
    data-aos-duration="500"
  >
    始める
  </button>
</section>

2. フィーチャーカードグリッド

<div class="features-grid">
  <!-- 段階的にカードを遅延させる -->
  <div
    class="feature-card"
    data-aos="fade-up"
    data-aos-duration="600"
    data-aos-delay="0"
  >
    <h3>フィーチャー 1</h3>
    <p>説明...</p>
  </div>

  <div
    class="feature-card"
    data-aos="fade-up"
    data-aos-duration="600"
    data-aos-delay="100"
  >
    <h3>フィーチャー 2</h3>
    <p>説明...</p>
  </div>

  <div
    class="feature-card"
    data-aos="fade-up"
    data-aos-duration="600"
    data-aos-delay="200"
  >
    <h3>フィーチャー 3</h3>
    <p>説明...</p>
  </div>
</div>

3. 交互するコンテンツセクション

<!-- 左からコンテンツ -->
<div class="section">
  <div
    class="content"
    data-aos="slide-right"
    data-aos-duration="800"
  >
    <h2>セクションタイトル</h2>
    <p>コンテンツが左からスライドインします...</p>
  </div>
  <img
    src="image1.jpg"
    data-aos="fade-left"
    data-aos-delay="200"
  />
</div>

<!-- 右からコンテンツ -->
<div class="section reverse">
  <img
    src="image2.jpg"
    data-aos="fade-right"
  />
  <div
    class="content"
    data-aos="slide-left"
    data-aos-duration="800"
    data-aos-delay="200"
  >
    <h2>セクションタイトル</h2>
    <p>コンテンツが右からスライドインします...</p>
  </div>
</div>

4. スクロールトリガーのテスティモニアル

<div class="testimonials">
  <div
    class="testimonial"
    data-aos="zoom-in"
    data-aos-duration="500"
  >
    <blockquote>"素晴らしい製品!"</blockquote>
    <cite>- John Doe</cite>
  </div>

  <div
    class="testimonial"
    data-aos="zoom-in"
    data-aos-duration="500"
    data-aos-delay="100"
  >
    <blockquote>"期待を超えました"</blockquote>
    <cite>- Jane Smith</cite>
  </div>
</div>

5. カスタムアンカートリガー

異なる要素のスクロール位置に基づいてアニメーションを発動させます:

<!-- メインコンテンツのスクロールに基づいて固定サイドバーがアニメーション -->
<div class="main-content">
  <div id="trigger-point" data-aos-id="sidebar-trigger">
    <!-- コンテンツ -->
  </div>
</div>

<aside
  class="sidebar"
  data-aos="fade-left"
  data-aos-anchor="#trigger-point"
>
  サイドバーコンテンツ
</aside>

6. 連続したアニメーションチェーン

<div class="animation-sequence">
  <!-- ステップ 1: ヘッディング -->
  <h2
    data-aos="fade-down"
    data-aos-duration="600"
    data-aos-delay="0"
  >
    私たちのプロセス
  </h2>

  <!-- ステップ 2: 説明 -->
  <p
    data-aos="fade-up"
    data-aos-duration="600"
    data-aos-delay="200"
  >
    シンプルなステップに従ってください
  </p>

  <!-- ステップ 3-5: プロセスカード -->
  <div
    class="process-step"
    data-aos="flip-left"
    data-aos-delay="400"
  >
    ステップ 1
  </div>

  <div
    class="process-step"
    data-aos="flip-left"
    data-aos-delay="600"
  >
    ステップ 2
  </div>

  <div
    class="process-step"
    data-aos="flip-left"
    data-aos-delay="800"
  >
    ステップ 3
  </div>
</div>

7. ズームエフェクト付きイメージギャラリー

<div class="gallery">
  <img
    src="photo1.jpg"
    data-aos="zoom-in-up"
    data-aos-duration="800"
  />
  <img
    src="photo2.jpg"
    data-aos="zoom-in-up"
    data-aos-duration="800"
    data-aos-delay="100"
  />
  <img
    src="photo3.jpg"
    data-aos="zoom-in-up"
    data-aos-duration="800"
    data-aos-delay="200"
  />
</div>

インテグレーションパターン

React インテグレーション

基本的なセットアップ:

import { useEffect } from 'react';
import AOS from 'aos';
import 'aos/dist/aos.css';

function App() {
  useEffect(() => {
    AOS.init({
      duration: 800,
      once: true,
      offset: 100
    });
  }, []);

  return (
    <div>
      <h1 data-aos="fade-down">ようこそ</h1>
      <p data-aos="fade-up">ここにコンテンツ</p>
    </div>
  );
}

ルート変更時にリフレッシュ:

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import AOS from 'aos';

function App() {
  const location = useLocation();

  useEffect(() => {
    AOS.init({ duration: 800 });
  }, []);

  // ルート変更時に AOS をリフレッシュ
  useEffect(() => {
    AOS.refresh();
  }, [location]);

  return <Routes>{/* routes */}</Routes>;
}

動的コンテンツ更新:

import { useState, useEffect } from 'react';
import AOS from 'aos';

function DynamicList() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    AOS.init();
  }, []);

  const addItem = () => {
    setItems([...items, { id: Date.now(), text: '新しいアイテム' }]);

    // 新しい要素を検出するために AOS をリフレッシュ
    setTimeout(() => AOS.refresh(), 50);
  };

  return (
    <div>
      <button onClick={addItem}>アイテム追加</button>
      <ul>
        {items.map((item) => (
          <li key={item.id} data-aos="fade-in">
            {item.text}
          </li>
        ))}
      </ul>
    </div>
  );
}

コンポーネントラッパーパターン:

import AOS from 'aos';
import 'aos/dist/aos.css';

function AnimatedSection({ children, animation = "fade-up", delay = 0, ...props }) {
  return (
    <div
      data-aos={animation}
      data-aos-delay={delay}
      {...props}
    >
      {children}
    </div>
  );
}

// 使用方法
<AnimatedSection animation="slide-right" delay={200}>
  <h2>アニメーション付きコンテンツ</h2>
</AnimatedSection>

Vue.js インテグレーション

<template>
  <div>
    <h1 data-aos="fade-down">Vue + AOS</h1>
    <div
      v-for="(item, index) in items"
      :key="item.id"
      data-aos="fade-up"
      :data-aos-delay="index * 100"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
import AOS from 'aos';
import 'aos/dist/aos.css';

export default {
  mounted() {
    AOS.init({ duration: 800 });
  },
  updated() {
    // コンポーネント更新時にリフレッシュ
    this.$nextTick(() => {
      AOS.refresh();
    });
  },
  data() {
    return {
      items: [/*...*/]
    };
  }
};
</script>

Next.js インテグレーション

// pages/_app.js
import { useEffect } from 'react';
import AOS from 'aos';
import 'aos/dist/aos.css';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    AOS.init({
      duration: 800,
      once: true
    });
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

// pages/index.js
export default function Home() {
  return (
    <main>
      <h1 data-aos="fade-down">Next.js + AOS</h1>
      <p data-aos="fade-up">アニメーション付きのサーバーサイドレンダリングコンテンツ</p>
    </main>
  );
}

パフォーマンス最適化

1. モバイルデバイスで無効化

AOS.init({
  disable: 'mobile', // モバイルで無効化
  // またはカスタムロジック用に関数を使用
  disable: function() {
    return window.innerWidth < 768;
  }
});

2. より良いパフォーマンスのために Once を使用

AOS.init({
  once: true, // 一度だけアニメーション (より良いパフォーマンス)
  mirror: false // アニメーションアウトなし
});

3. Throttle と Debounce を最適化

AOS.init({
  throttleDelay: 99,  // スクロールイベント throttle (デフォルト)
  debounceDelay: 50   // リサイズイベント debounce (デフォルト)
});

4. 静的コンテンツの Mutation Observer を無効化

AOS.init({
  disableMutationObserver: true // 完全に静的なコンテンツで無効化
});

5. アニメーション複雑さを削減

<!-- シンプルなアニメーションはパフォーマンスが良い -->
<div data-aos="fade-in">シンプルフェード</div>

<!-- 複雑なアニメーションは jank を引き起こす可能性 -->
<div data-aos="flip-left">複雑なフリップ</div>

6. 初期化に RequestIdleCallback を使用

if ('requestIdleCallback' in window) {
  requestIdleCallback(() => {
    AOS.init({ duration: 800 });
  });
} else {
  AOS.init({ duration: 800 });
}

よくあるトラブル

1. DOM 変更後のリフレッシュ忘れ

問題: 動的に追加された新しい要素がアニメーションしない。

解決: AOS.refresh() または AOS.refreshHard() を呼び出します:

// DOM に要素を追加した後
const newElement = document.createElement('div');
newElement.setAttribute('data-aos', 'fade-in');
container.appendChild(newElement);

// AOS をリフレッシュ
AOS.refresh(); // 位置を再計算
// または
AOS.refreshHard(); // 完全に再初期化

2. React でアニメーションが動作しない

問題: AOS が最初のレンダリングまたはルート変更後に要素を検出しない。

解決: useEffect で初期化して、ルート/コンテンツ変更時にリフレッシュします:

useEffect(() => {
  AOS.init();
  return () => AOS.refresh(); // クリーンアップ
}, []);

useEffect(() => {
  AOS.refresh(); // ルート変更時にリフレッシュ
}, [location.pathname]);

3. スクロールパフォーマンスの問題

問題: 多くのアニメーション要素があるとページスクロールが重く感じる。

解決: アニメーション要素を減らして once: true を使用します:

AOS.init({
  once: true, // 一度だけアニメーション
  disable: window.innerWidth < 768 // モバイルで無効化
});

4. CSS の競合

問題: カスタム CSS が AOS アニメーションと干渉する。

解決: より詳細なセレクターを使用して !important を避けます:

/* 悪い例: AOS と競合 */
div {
  opacity: 1 !important;
}

/* 良い例: 詳細なセレクター */
.my-content > div {
  /* スタイル */
}

5. アンカー配置の混乱

問題: アニメーションが予期しないスクロール位置でトリガーされる。

解決: アンカー配置オプションを理解します:

// 要素のトップがビューポートボトムに当たったときにトリガー
data-aos-anchor-placement="top-bottom"

// 要素のセンターがビューポートセンターに当たったときにトリガー
data-aos-anchor-placement="center-center"

// 要素のボトムがビューポートトップに当たったときにトリガー
data-aos-anchor-placement="bottom-top"

6. Duration/Delay の制限

問題: 3000ms 以上の値が機能しない。

解決: 拡張された期間用のカスタム CSS を追加します:

body[data-aos-duration='4000'] [data-aos],
[data-aos][data-aos][data-aos-duration='4000'] {
  transition-duration: 4000ms;
}

<div data-aos="fade-in" data-aos-duration="4000">
  ロングアニメーション
</div>

ビルトインアニメーション

フェードアニメーション

  • fade-in - シンプルフェードイン
  • fade-up - 下からフェードイン
  • fade-down - 上からフェードイン
  • fade-left - 右からフェードイン
  • fade-right - 左からフェードイン
  • fade-up-right - 対角線フェード
  • fade-up-left - 対角線フェード
  • fade-down-right - 対角線フェード
  • fade-down-left - 対角線フェード

スライドアニメーション

  • slide-up - 下からスライド
  • slide-down - 上からスライド
  • slide-left - 右からスライド
  • slide-right - 左からスライド

ズームアニメーション

  • zoom-in - ズームイン
  • zoom-in-up - 下からズームイン
  • zoom-in-down - 上からズームイン
  • zoom-in-left - 右からズームイン
  • zoom-in-right - 左からズームイン
  • zoom-out - ズームアウト
  • zoom-out-up - 上へズームアウト
  • zoom-out-down - 下へズームアウト
  • zoom-out-left - 左へズームアウト
  • zoom-out-right - 右へズームアウト

フリップアニメーション

  • flip-up - 下からフリップ
  • flip-down - 上からフリップ
  • flip-left - 右からフリップ
  • flip-right - 左からフリップ

カスタムアニメーション

CSS でカスタムアニメーションを作成します:

[data-aos="custom-slide-bounce"] {
  opacity: 0;
  transform: translateY(100px);
  transition-property: transform, opacity;
}

[data-aos="custom-slide-bounce"].aos-animate {
  opacity: 1;
  transform: translateY(0);
  animation: bounce 0.5s;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

<div data-aos="custom-slide-bounce">
  カスタムアニメーション
</div>

代替案との比較

AOS vs GSAP ScrollTrigger

機能AOSGSAP ScrollTrigger
複雑さシンプル、data-attribute ベース高度、JavaScript API
ユースケースシンプルなリビール複雑なタイムライン
ファイルサイズ~13KB~27KB (GSAP) + ScrollTrigger
パフォーマンスCSS ドリブンJavaScript ドリブン
学習曲線数分数時間
カスタマイズ限定的広範囲
最適な用途マーケティングページインタラクティブなエクスペリエンス

AOS を使用する場合:

  • シンプルなフェード/スライド/ズームエフェクト
  • クイック実装が必要
  • 最小限の JavaScript を好む
  • 基本的なスクロールリビール十分

GSAP ScrollTrigger を使用する場合:

  • 複雑なアニメーションシーケンス
  • 正確なスクロール同期アニメーション
  • タイムラインのオーケストレーション
  • 高度なイージング/物理が必要

リソース

公式ドキュメント

キースクリプト

  • scripts/aos_generator.py - AOS HTML ボイラープレートを生成
  • scripts/config_builder.py - AOS 設定を構築

リファレンス

  • references/aos_api.md - 完全な AOS API リファレンス
  • references/animation_catalog.md - すべてのビルトインアニメーションとデモ
  • references/integration_patterns.md - フレームワークインテグレーションガイド

スターターアセット

  • assets/starter_aos/ - 完全な AOS スターターテンプレート
  • assets/examples/ - 本番対応パターン

関連スキル

  • gsap-scrolltrigger: 複雑なスクロール駆動アニメーション向け
  • motion-framer: React 固有のアニメーション with 物理向け
  • locomotive-scroll: パララックス付きのスムーズスクロール向け
  • animated-component-libraries: プリビルト済みのアニメーション React コンポーネント向け

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者
freshtechbro
リポジトリ
freshtechbro/claudedesignskills
ライセンス
MIT
最終更新
不明
GitHubで原本を見る →フィードバックを送る

Source: https://github.com/freshtechbro/claudedesignskills / ライセンス: MIT

関連スキル

汎用ソフトウェア開発⭐ リポ 39,967

doubt-driven-development

重要な判断はすべて、本番環境への展開前に新しい視点から対抗的レビューを実施します。速度より正確性が重要な場合、不慣れなコードを扱う場合、本番環境・セキュリティに関わるロジック・取り消し不可の操作など影響度が高い場合、または後でバグを修正するよりも今検証する方が効率的な場合に活用してください。

by addyosmani
汎用ソフトウェア開発⭐ リポ 1,175

apprun-skills

TypeScriptを使用したAppRunアプリケーションのMVU設計に関する総合的なガイダンスが得られます。コンポーネントパターン、イベントハンドリング、状態管理（非同期ジェネレータを含む）、パラメータと保護機能を備えたルーティング・ナビゲーション、vistestを使用したテストに対応しています。AppRunコンポーネントの設計・レビュー、ルートの配線、状態フローの管理、AppRunテストの作成時に活用してください。

by yysun
OpenAIソフトウェア開発⭐ リポ 797

desloppify

コードベースのヘルスチェックと技術負債の追跡ツールです。コード品質、技術負債、デッドコード、大規模ファイル、ゴッドクラス、重複関数、コードスメル、命名規則の問題、インポートサイクル、結合度の問題についてユーザーが質問した場合に使用してください。また、ヘルススコアの確認、次の改善項目の提案、クリーンアップ計画の作成をリクエストされた際にも対応します。29言語に対応しています。

by Git-on-my-level
汎用ソフトウェア開発⭐ リポ 39,967

debugging-and-error-recovery

テストが失敗したり、ビルドが壊れたり、動作が期待と異なったり、予期しないエラーが発生したりした場合に、体系的な根本原因デバッグをガイドします。推測ではなく、根本原因を見つけて修正するための体系的なアプローチが必要な場合に使用してください。

by addyosmani
汎用ソフトウェア開発⭐ リポ 39,967

test-driven-development

テスト駆動開発により実装を進めます。ロジックの実装、バグの修正、動作の変更など、あらゆる場面で活用できます。コードが正常に動作することを証明する必要がある場合、バグ報告を受けた場合、既存機能を修正する予定がある場合に使用してください。

by addyosmani
汎用ソフトウェア開発⭐ リポ 39,967

incremental-implementation

変更を段階的に実施します。複数のファイルに影響する機能や変更を実装する場合に使用してください。大量のコードを一度に書こうとしている場合や、タスクが一度では完結できないほど大きい場合に活用します。

by addyosmani
本サイトは GitHub 上で公開されているオープンソースの SKILL.md ファイルをクロール・インデックス化したものです。 各スキルの著作権は原作者に帰属します。掲載に問題がある場合は info@alsel.co.jp または /takedown フォームよりご連絡ください。
原作者: freshtechbro · freshtechbro/claudedesignskills · ライセンス: MIT