scroll-reveal-libraries

スクロールリビールライブラリ

概要

このスキルでは、スクロールをトリガーにしたアニメーションを実現する、軽量な CSS 主導のライブラリである AOS（Animate On Scroll）を扱います。AOS は、要素がビューポートに入ったときに有効になる、シンプルなフェード、スライド、ズーム効果を得意としています。

主な機能：

• 最小限のセットアップ：JavaScript ファイル 1 つと CSS
• データ属性 API：HTML でアニメーションを設定
• パフォーマンス：CSS 主導の GPU アクセラレーション対応アニメーション
• 50 種類以上の組み込みアニメーション：フェード、スライド、ズーム、フリップ
• フレームワークに依存しない：バニラ 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>
  

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

NPM/Yarn（推奨）：

npm install aos@next
# or
yarn add aos@next

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

AOS.init();

基本的な使い方

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

<div data-aos="fade-in">Content</div>


<div data-aos="fade-up">Content</div>


<div data-aos="slide-left">Content</div>


<div data-aos="zoom-in">Content</div>

設定オプション

グローバル設定：

AOS.init({
  // Animation settings
  duration: 800,  // Animation duration (ms): 0-3000
  delay: 0,       // Delay before animation (ms): 0-3000
  offset: 120,    // Offset from trigger point (px)
  easing: 'ease', // Easing function
  once: false,    // Animate only once (true) or every time (false)
  mirror: false,  // Animate out when scrolling past

  // Placement
  anchorPlacement: 'top-bottom', // Which position triggers animation

  // Performance
  disable: false,                // Disable on mobile/tablet
  startEvent: 'DOMContentLoaded', // Initialization event
  debounceDelay: 50,             // Window resize debounce
  throttleDelay: 99              // Scroll 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"
>
  Custom configured element
</div>

よくあるパターン

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

<section class="hero">
  
  <h1
    data-aos="fade-down"
    data-aos-duration="800"
  >
    Welcome to the Future
  </h1>

  
  <p
    data-aos="fade-up"
    data-aos-delay="200"
    data-aos-duration="600"
  >
    Transform your ideas into reality
  </p>

  
  <button
    data-aos="zoom-in"
    data-aos-delay="400"
    data-aos-duration="500"
  >
    Get Started
  </button>
</section>

2. 特徴紹介カードのグリッド

<div class="features-grid">
  
  <div
    class="feature-card"
    data-aos="fade-up"
    data-aos-duration="600"
    data-aos-delay="0"
  >
    <h3>Feature 1</h3>
    <p>Description...</p>
  </div>

  <div
    class="feature-card"
    data-aos="fade-up"
    data-aos-duration="600"
    data-aos-delay="100"
  >
    <h3>Feature 2</h3>
    <p>Description...</p>
  </div>

  <div
    class="feature-card"
    data-aos="fade-up"
    data-aos-duration="600"
    data-aos-delay="200"
  >
    <h3>Feature 3</h3>
    <p>Description...</p>
  </div>
</div>

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

<div class="section">
  <div
    class="content"
    data-aos="slide-right"
    data-aos-duration="800"
  >
    <h2>Section Title</h2>
    <p>Content slides in from left...</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>Section Title</h2>
    <p>Content slides in from right...</p>
  </div>
</div>

4. スクロールをトリガーにするお客様の声

<div class="testimonials">
  <div
    class="testimonial"
    data-aos="zoom-in"
    data-aos-duration="500"
  >
    <blockquote>"Amazing product!"</blockquote>
    <cite>- John Doe</cite>
  </div>

  <div
    class="testimonial"
    data-aos="zoom-in"
    data-aos-duration="500"
    data-aos-delay="100"
  >
    <blockquote>"Exceeded expectations"</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"
>
  Sidebar content
</aside>

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

<div class="animation-sequence">
  
  <h2
    data-aos="fade-down"
    data-aos-duration="600"
    data-aos-delay="0"
  >
    Our Process
  </h2>

  
  <p
    data-aos="fade-up"
    data-aos-duration="600"
    data-aos-delay="200"
  >
    Follow these simple steps
  </p>

  
  <div
    class="process-step"
    data-aos="flip-left"
    data-aos-delay="400"
  >
    Step 1
  </div>

  <div
    class="process-step"
    data-aos="flip-left"
    data-aos-delay="600"
  >
    Step 2
  </div>

  <div
    class="process-step"
    data-aos="flip-left"
    data-aos-delay="800"
  >
    Step 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">Welcome</h1>
      <p data-aos="fade-up">Content here</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 });
  }, []);

  // Refresh AOS on route change
  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: 'New Item' }]);

    // Refresh AOS to detect new elements
    setTimeout(() => AOS.refresh(), 50);
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</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>
  );
}

// Usage
<AnimatedSection animation="slide-right" delay={200}>
  <h2>Animated Content</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() {
    // Refresh when component updates
    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">Server-side rendered content with animations</p>
    </main>
  );
}

パフォーマンスの最適化

1. モバイルデバイスでは無効にする

AOS.init({
  disable: 'mobile', // Disable on mobile
  // Or use function for custom logic
  disable: function() {
    return window.innerWidth < 768;
  }
});

2. パフォーマンス向上のために一度だけ実行する

AOS.init({
  once: true, // Animate only once (better performance)
  mirror: false // Don't animate out
});

3. スロットルとデバウンスを最適化する

AOS.init({
  throttleDelay: 99,  // Scroll event throttle (default)
  debounceDelay: 50   // Resize event debounce (default)
});

4. 静的コンテンツでは Mutation Observer を無効にする

AOS.init({
  disableMutationObserver: true // Disable for fully static content
});

5. アニメーションの複雑さを抑える

<div data-aos="fade-in">Simple fade</div>


<div data-aos="flip-left">Complex flip</div>

6. 初期化に RequestIdleCallback を使う

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

よくある落とし穴

1. DOM の変更後に更新し忘れる

問題：要素を動的に追加しても、新しい要素がアニメーションしません。

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

// After adding elements to DOM
const newElement = document.createElement('div');
newElement.setAttribute('data-aos', 'fade-in');
container.appendChild(newElement);

// Refresh AOS
AOS.refresh(); // Recalculate positions
// or
AOS.refreshHard(); // Reinitialize completely

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

問題：AOS が初回のレンダリング時やルート変更時に要素を検出しません。

解決策：useEffect で初期化し、ルートやコンテンツの変更時に更新します。

useEffect(() => {
  AOS.init();
  return () => AOS.refresh(); // Cleanup
}, []);

useEffect(() => {
  AOS.refresh(); // Refresh on route change
}, [location.pathname]);

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

問題：アニメーションする要素が多いと、ページのスクロールがカクつきます。

解決策：アニメーションする要素を減らし、once: true を使用します。

AOS.init({
  once: true, // Animate only once
  disable: window.innerWidth < 768 // Disable on mobile
});

4. CSS の競合

問題：カスタム CSS が AOS のアニメーションと干渉します。

解決策：より詳細度の高いセレクターを使用し、!important は避けます。

/* Bad: Conflicts with AOS */
div {
  opacity: 1 !important;
}

/* Good: Specific selector */
.my-content > div {
  /* styles */
}

5. アンカー位置の混乱

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

解決策：アンカー位置のオプションを理解します。

// Triggers when element's top hits viewport bottom
data-aos-anchor-placement="top-bottom"

// Triggers when element's center hits viewport center
data-aos-anchor-placement="center-center"

// Triggers when element's bottom hits viewport top
data-aos-anchor-placement="bottom-top"

6. 持続時間／遅延の上限

問題：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">
  Long animation
</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">
  Custom animation
</div>

代替手段との比較

AOS と GSAP ScrollTrigger

機能	AOS	GSAP ScrollTrigger
複雑さ	シンプル、データ属性ベース	高度、JavaScript API
用途	シンプルな表示	複雑なタイムライン
ファイルサイズ	約 13KB	約 27KB (GSAP) + ScrollTrigger
パフォーマンス	CSS 駆動	JavaScript 駆動
学習曲線	数分	数時間
カスタマイズ	限定的	豊富
最適な用途	マーケティングページ	インタラクティブな体験

AOS を使う場合:

• シンプルなフェード/スライド/ズーム効果
• 素早い実装が必要
• 最小限の JavaScript を希望
• 基本的なスクロール表示で十分

GSAP ScrollTrigger を使う場合:

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

リソース

公式ドキュメント

• AOS: https://michalsnik.github.io/aos/
• GitHub: https://github.com/michalsnik/aos

主要スクリプト

• 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 固有のアニメーション向け
• locomotive-scroll: パララックス付きのスムーズスクロール向け
• animated-component-libraries: 構築済みのアニメーション付き React コンポーネント向け