freefielder.jp

スクロールして、要素が可視領域に入ると次々に表示されるようなページを作りたい。

以前は、

…というスクリプトを自前で書く必要がありました。

でも今は、超便利な "Intersection Observer API" というものが用意されているので、この API を呼び出すことで、前者をブラウザ任せにできます。コードも簡単、動作も軽くなる。いい事ずくめ。

以下のMDNの解説ページに詳しい解説があります。

とりあえず、簡単なサンプル。

上のサンプルは…

…という感じに作ってみたものなので、コードは…

.fi{
    opacity:0;      /* 不透明度の初期値 0（完全透過）*/
    transition : opacity 5s 0.3s;  /* opacity値に変更が加えられたら0.3秒待って、5秒掛けて変更値へ遷移。*/
}

// クラス .fi を指定した要素をリストアップし、それぞれを監視する
window.addEventListener(
      "load",
      (event)=>{
            let tgts = document.querySelectorAll('.fi');    // クラス .fi な要素を全て取得
            let options = {         // 監視オプション
                  root : null,            // Documentルートに対して位置を計測
                  rootMargin : '0px',     // マージンなし
                  threshold : 0.5         // 対象要素の50%が可視になったら発動させる
            }

            tgts.forEach( (tgt)=>{  // それぞれの監視要素に対してオブザーバーを登録
                  new IntersectionObserver( handler , options).observe(tgt);
            });
      },
      false
);

// コールバック関数。
// entry.isIntersecting （閾値を超えたら true、超えていなければ false を返す）の値をチェック。
// この例では「閾値を超えたときに、対象要素の opacity を 0(透明)→1(完全不透明)にする」という操作を行っている
function handler( entries ){
      entries.forEach((entry)=> {
            if( entry.isIntersecting ){
                  entry.target.style.opacity = 1;
            }
      });
}

opacity の設定値を逆にすれば「見えたらフェードアウト」になります。

.fi{
    opacity:1;      /* 不透明度の初期値 1（完全不透過）*/
    visibility:visible;      /* 要素を表示（これはデフォルト値なので設定しなくてもよい）*/
    transition : opacity 5s 0.3s, visibility 5.5s;  /* opacity値に変更が加えられたら0.3秒待って、5秒掛けて変更値へ遷移。visibility値が変更されたら、5.5秒後に変更値へ遷移。*/
}

// コールバック関数。
// 閾値を超えたときに、対象要素の opacity を 1(不透明)→0(透明)にし、visibilityをhiddenにする
function handler( entries ){
      entries.forEach((entry)=> {
            if( entry.isIntersecting ){
                  entry.target.style.opacity = 0;
                  entry.target.style.visibility = 'hidden';
            }
      });
}

コールバック関数内で利用する、要素の交差状態の変化を表すプロパティは、今回の例の "isIntersecting" (交差したか、していないかを判断する)の他にも幾つか用意されています。詳しくは、以下を参照してください。