Intersection Observer APIで実現するスクロールアニメーション

Webサイトを作っていると、スクロールアニメーションを取り入れたくなること、ありませんか？スクロールするたびにアニメーションが発動するのって、ユーザーにとっても楽しいし、サイトが動きのある印象を与えてくれますよね。でも、アニメーションをうまく実装するのって意外と大変で、パフォーマンスにも気を使わなきゃいけません。

そんなときに便利なのが「Intersection Observer API」。これを使えば、スクロール時に特定の要素が画面に現れたときにアニメーションを発動させることができるんです。しかも、パフォーマンスも最適化できるから、ユーザーの体験を損なわずに、スマートに実装できます。

今回は、このIntersection Observerを使ってスクロールアニメーションを実装する方法をわかりやすく紹介していきます！

1. Intersection Observer APIって？

まず、Intersection Observer APIの基本的なところからおさらいしておきましょう。簡単に言うと、このAPIを使うと、ある要素が画面に表示されたとき（または一定の割合で表示されたとき）に、何かしらのアクションを起こせるんです。

たとえば、スクロールしてきたときに、特定の要素がビューに現れるタイミングを検知して、そのタイミングでアニメーションを開始したり、画像を遅延読み込み（Lazy Load）したりできます。

こんな感じで、ターゲット要素が指定した条件を満たすと、コールバック関数が呼ばれます。これが便利で、パフォーマンスにも優れた仕組みなんです。

主なプロパティやメソッド

IntersectionObserver：監視を開始するためのインスタンスを作るコンストラクタ
observe()：監視対象の要素を指定する
unobserve()：監視を停止する
disconnect()：監視そのものを解除する

これを使えば、スクロールイベントの頻繁な発火を防げて、ページのパフォーマンスが改善されるんですよ。

2. スクロールアニメーションの実装方法

じゃあ、実際にスクロールアニメーションを作ってみましょう！今回は、ページをスクロールしたときに、特定の要素が表示されるとフェードインするアニメーションを作ります。

監視対象を決めて、設定をしよう

まず、スクロールでアニメーションを発動させたい要素をHTMLで定義します。今回はシンプルにこんな感じで書いてみました。

<div class="fade-in-element">
  スクロールで表示されるコンテンツ
</div>

次に、JavaScriptでこの要素を監視します。

const observer = new IntersectionObserver(callback, options);
const target = document.querySelector('.fade-in-element');
observer.observe(target);

ここでは、callbackが監視対象の要素が指定した条件を満たしたときに実行される関数です。条件は、たとえば「50%画面に表示されたら」などです。

コールバック関数を作ろう

スクロールで要素が画面に現れると、アニメーションを始めたいですよね？そのために、Intersection Observerのcallback関数を作成します。

const callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('fade-in');
      observer.unobserve(entry.target);
    }
  });
};

このように、要素がビューポートに現れたら、fade-inクラスを追加して、アニメーションを発動させます。

CSSでアニメーションを定義しよう

そして、CSSでアニメーションを設定します。今回は、フェードインするアニメーションを作ってみました。

.fade-in {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.fade-in-element {
  opacity: 0;
}

これで、スクロール時に要素が50%見えたら、フェードインするアニメーションが始まります。

3. 実践例: フェードインアニメーションを作ってみよう

次に、実際にスクロールアニメーションを試してみます！下記のHTMLとJavaScriptを使って、実際に動かしてみてください。

HTMLとCSSの準備

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>スクロールアニメーション</title>
  <style>
    .fade-in {
      opacity: 1;
      transition: opacity 1s ease-in-out;
    }

    .fade-in-element {
      opacity: 0;
    }

    .container {
      height: 2000px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="fade-in-element">
      ここがスクロールで表示される部分です。
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

JavaScriptによるIntersection Observerの設定

const observer = new IntersectionObserver(callback, { threshold: 0.5 });
const target = document.querySelector('.fade-in-element');
observer.observe(target);

const callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('fade-in');
      observer.unobserve(entry.target);
    }
  });
};

これで、スクロールしてきたときに要素が50%見えるとフェードインアニメーションが発動します。