ブログの「素人感」を卒業。Intersection Observerを使った最新の高速表示テクニック

脱・素人感。プロのサイトがこっそりやってる画像の「ふわっと」とした出し方を完全再現

引用：
https://ics.media/entry/250221/

GTMを使って画像をふわっと表示させる方法

ブログの画像をスクロールに合わせて「スッ…」と浮かび上がらせる演出、おしゃれですよね。
今回は、個別の記事を編集することなく、GTMを使って一気に実装する手順を解説します。

動作の仕組み

JavaScriptの「Intersection Observer（交差監視）」という機能を使います。

画像が画面内に現れたことを検知

CSSクラスを付与して、不透明度（opacity）と位置（transform）を変化させる
という流れです。

GTMに設定するコード

GTMの「カスタムHTML」タグを作成し、以下のコードを貼り付けてください。

注意：すべての画像に適用されるため、ロゴやアイコンも対象になります。特定の画像だけにしたい場合は、querySelectorAll('img') の部分を調整してください。

<style>

  /* GTMから全画像にアニメーション準備を強制 */

  .gtm-fade-target {

    opacity: 0;

    transform: translateY(20px);

    transition: opacity 1.0s ease-out, transform 1.0s ease-out;

  }

  /* 画面内に入った時に付与するクラス */

  .gtm-fade-in {

    opacity: 1 !important;

    transform: translateY(0) !important;

  }

</style>



<script>

  (function() {

    // ページ内のすべてのimgタグを取得

    var imgs = document.querySelectorAll('img');

    

    // 各画像にアニメーション用のクラスを付与し、監視を開始

    var observer = new IntersectionObserver(function(entries) {

      entries.forEach(function(entry) {

        if (entry.isIntersecting) {

          entry.target.classList.add('gtm-fade-in');

        }

      });

    }, { threshold: 0.1 });



    imgs.forEach(function(img) {

      img.classList.add('gtm-fade-target'); // 準備用のクラスを付与

      observer.observe(img);

    });

  })();

</script>