【JavaScript】スクロールに応じて動くアニメーションの作り方

おしゃれなウェブサイトでよく見かけるスクロールに応じて動くアニメーションを自分でも作れるようになりたくて、作り方をまとめてみました。

動くアニメーションのサンプル

まずはサンプルをご覧ください。

スクロールをすると文字がアニメーションで表示されます。

See the Pen scroll_animation_1 by Usagi (@naniwa_usagi) on CodePen.

動く仕組み

特定の要素が指定した領域にスクロールされた場合にアニメーションが実行されるようになっています。

この動きを実現するためにJavaScriptのIntersection Observer APIを利用しています。

要素の取得

まずはアニメーションさせたい要素を取得します。

サンプルではdocument.getElementByIdを使用していますが、複数要素を取得したい場合はdocument.querySelectorAllなどを使用してください。

// アニメーションさせる要素
const scrollObj = document.getElementById('scroll');

この要素にはmargin-topのスタイルを適用しています。

後述で解説しますが、margin-topで指定した位置までスクロールしたアニメーションが動くようになります。

#scroll{
  margin-top: 200px;
  opacity: 0;
}

アニメーション処理を定義

続いてアニメーションを実行する処理を作ります。

Intersection Observer APIのコールバック関数は交差情報を持つentriesとobserverを引数に持ちます。

交差情報とは、アニメーションさせたい要素が閾値を超えたときに得られる情報で、今回はそのうちの要素を示すtargetを使用します。

// アニメーションを実行
const action = (entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('fade-in');
    }
  });
}

コールバック関数ではアニメーションさせたい要素にCSSクラスを追加しています。

このCSSクラスには画面上部から下方向に動きながらフェードインするアニメーションを定義しています。

.fade-in{
  animation: fade 1s forwards;
}
@keyframes fade{
  0%{opacity: 0; transform: translateY(-300px);}
  100%{opacity: 1; transform: translateY(-100px);}
}

監視処理を定義

最後にアニメーションさせたい要素を監視する処理を定義します。

IntersectionObserverのインスタンスを作成して、IntersectionObserverオブジェクトのobserveメソッドで要素を監視します。

// 監視対象が閾値を超えたときに実行する処理を指定
const io = new IntersectionObserver(action);

// 対象を監視する
io.observe(scrollObj);

色や大きさを変える

CSSに色や大きさを指定することで、色や大きさのアニメーションも可能です。

.fade-in{
  animation: fade 1s forwards;
}
@keyframes fade{
  0%{opacity: 0; transform: translateY(-300px);}
  100%{opacity: 1; transform: translateY(-100px); color: red; font-size: 2em; font-weight: bold;}
}

See the Pen scroll_animation_2 by Usagi (@naniwa_usagi) on CodePen.