スクロールアニメーションと画像表示の考え方【中級編⑥】

はじめに

今回は、スクロールすると画像が表示されるアニメーションの仕組みについて考えていきます。

スクロールすると右からフワッと表示される画像

See the Pen スクロールすると右からフワッと表示される画像 by Uka Suzuki (@uukasuzuki_) on CodePen.

JavaScriptのコード解説

const showImage = (entries) => {
  const keyframes = {
    opacity: [0, 1],  // 透明度が0から1に変化
    transform: ["translateX(200px)", "translateX(0)"],  // 画像が右から中央に移動
  };
  entries[0].target.animate(keyframes, 600);  // 600ミリ秒間、アニメーション実行
};

• この関数はIntersectionObserverから渡されるentriesを受け取り、アニメーションを実行します。opacityは透明度を制御し、0（完全に透明）から1（完全に表示）へ変化します。transformはtranslateXを使って、X方向（横方向）に200pxから0までの移動を表現します。つまり、画像が右から中央にスライドします。

• entries[0].target.animate(keyframes, 600)では、entriesは、監視対象の要素に関する情報が格納された配列です。entries[0].targetはその中の1つ目の監視対象（ここでは画像）を指します。そして、.animate(keyframes, 600) はkeyframesで指定されたアニメーションを600ミリ秒（0.6秒）で実行します。

const options = {
  threshold: 0.5, // 画像が50%表示された時にアニメーションを発火
};

• thresholdは、指定された要素が表示領域にどの程度入ったときに、コールバックが発火するかを決めるものです。この場合は50%（0.5）と指定しているので、画像の50%が表示された時点でアニメーションが開始されます。

const ImageObserver = new IntersectionObserver(showImage);
ImageObserver.observe(document.querySelector("#Image"));

• new IntersectionObserver(showImage)のIntersectionObserverでは、特定の要素が表示領域に入ったり出たりすることを監視するAPIです。ここでは、画像が50%表示されたタイミングでshowImage関数が呼び出されます。

• ImageObserver.observe(document.querySelector("#Image"))は、observeメソッドで、監視する要素を指定します。この場合、#ImageとしてIDが設定された画像要素を監視対象にしています。

まとめ

今回は、スクロールすると画像が表示されるアニメーションの仕組みについてまとめました。次回は、これらをもとに、実際にポートフォリオサイトで使いたい動きを考えていきます。