Web Design Leaves

<div class="target">
  <div class="fadeInFromRight rect">target.rect</div>
</div>
<div class="target">
  <div class="fadeInFromLeft circle">target.rect</div>
</div>
<div class="target">
  <div class="rotateFromBottom square">target.square</div>
</div>

//IntersectionObserver を設定する関数
const setObserver = () => {

  //コールバック関数の定義
  const callback = (entries) => {
    //各 entry（IntersectionObserverEntry オブジェクト）に対して
    entries.forEach( (entry) => {
      //監視対象の要素が領域内に入った場合の処理
      if (entry.isIntersecting) {
        //監視対象の要素（entry.target）に inView クラスを追加
        entry.target.classList.add('inView');
      } else { //監視対象の要素が領域外になった場合の処理
        //監視対象要素から inView クラスを削除
        entry.target.classList.remove('inView');
      }
    });
  }

  //オプション
  const options = {
    //コールバック関数を呼び出すタイミングを指定
    threshold: [0,1]
  }

  //引数にコールバック関数とオプションを指定してオブザーバーを生成
  const observer = new IntersectionObserver(callback, options);

  //監視対象の要素（target クラスを指定した要素）を全て取得
  const targets = document.querySelectorAll('.target');

  //全ての監視対象要素を observe() メソッドに指定
  targets.forEach( (elem) => {
    //observe() に監視対象の要素を指定
    observer.observe(elem);
  });
}
//上記関数の実行
setObserver();  

document.addEventListener('DOMContentLoaded', () => {
  //DOM ツリーの構築（解析）が完了した時点で呼び出す
  setObserver();
}); 

<div class="target">
  <div class="fadeInFromRight rect">target.rect</div>
  <p>Lorem ipsum dolor sit amet,...debitis.</p>
  <p>Repellendus in...voluptatibus possimus!</p>
  <p>Inventore sequi nobis, ...quasi, nulla.</p>
</div>
<div class="target">
  <div class="fadeInFromLeft circle">target.circle</div>
  <p>Lorem ipsum dolor ... tempore et pariatur quia.</p>
  <p>Numquam eius ...nam ipsa, laborum.</p>
  <p>Doloremque aperiam ... autem iure numquam.</p>
</div>
<div class="target">
  <div class="rotateFromBottom square">target.square</div>
  <p>Lorem ipsum dolor sit... vitae hic recusandae.</p>
  <p>Iste, nemo, ... Inventore quos harum beatae.</p>
  <p>Sint magnam pariatur... possimus voluptate.</p>
</div>

<div class="target"><!--対象の要素-->
  <p>.target <span id="span"></span></p>
</div>

/*要素のスタイル*/
.target {
  width: 300px;
  height: 200px;
  background-color: rebeccapurple;
  color: #fff;
  text-align: center;
  line-height: 200px;
}

/*背景色を変更するアニメーションのクラス*/
.allInView {
  animation: backgroundChange 9s infinite;
}
@keyframes backgroundChange {
  0% {
    background-color:rebeccapurple;
  }
  20% {
    background-color:crimson;
  }
  45% {
    background-color:darkcyan;
  }
  70% {
    background-color:darkkhaki;
  }
  90% {
    background-color:darksalmon;
  }
}

//オプション
const options = {
  //全体が表示された時と全体が表示されなくなる時にコールバック関数が呼び出される
  threshold: 1,
  //必要に応じてオフセットを指定
  //rootMargin: '-50px 0px',
}

//コールバック関数で使用するテキストを出力する要素を取得
const span = document.getElementById('span');

//コールバック関数の定義
const callback = (entries) => {
  //各 entry に対して
  entries.forEach( (entry) => {
    //監視対象の要素が領域内に入った際（この場合は全体が見えた際）の処理
    if (entry.isIntersecting) {
      //監視対象の要素（entry.target）に allInView クラスを追加
      entry.target.classList.add('allInView');
      //span 要素にテキストを表示
      span.textContent = '.allInView';
    } else { //一部が見えなくなった（全体が表示されていない）際の処理
      //監視対象要素から allInView クラスを削除
      entry.target.classList.remove('allInView');
      //span 要素のテキストを空に
      span.textContent = '';
    }
  });
}

//オブザーバーを生成
const observer = new IntersectionObserver(callback, options);
//監視対象の要素（target クラスを指定した要素）を全て取得
const targets = document.querySelectorAll('.target');

//全ての監視対象要素を observe() メソッドに指定
targets.forEach( (elem) => {
  //observe() に監視対象の要素を指定
  observer.observe(elem);
});

const callback = (entries) => {
  entries.forEach( (entry) => {
    //交差の割合が1以上の場合（全体が見えている場合）
    if (entry.intersectionRatio >= 1) {
      entry.target.classList.add('allInView');
      span.textContent = '.allInView';
    } else { //交差の割合が1未満の場合（一部が見えていない場合）
      entry.target.classList.remove('allInView');
      span.textContent = '';
    }
  });
}

//オプション
const options = {
  //対象の要素が領域に出入りする際（0）との全体が表示される際（1）を指定
  threshold: [0, 1],
}

const span = document.getElementById('span');

//コールバック関数の定義
const callback = (entries) => {
  //各 entry に対して
  entries.forEach( (entry) => {
    //交差の割合が1以上の場合（全体が見えている場合）
    if (entry.intersectionRatio >= 1) {
      entry.target.classList.add('allInView');
      span.textContent = '.allInView';
    //交差の割合が0の（見えなくなった）場合
    } else if(entry.intersectionRatio === 0){
      entry.target.classList.remove('allInView');
      span.textContent = '';
      //console.log('removed'); //確認用
    }
  });
}

const observer = new IntersectionObserver(callback, options);
const targets = document.querySelectorAll('.target');
targets.forEach( (elem) => {
  observer.observe(elem);
});

//オプション
const options = {
  //交差の割合が 0.3 または 0.75 でコールバック関数を呼び出す
  threshold: [.3, .75],
}

//テキストを出力する要素を取得
const span = document.getElementById('span');

//コールバック関数の定義
const callback = (entries) => {
  //各 entry に対して
  entries.forEach( (entry) => {
    //交差の割合が0.75以上の場合
    if (entry.intersectionRatio >= .75) {
      entry.target.classList.add('partInView');
      span.textContent = '.partInView';
      //console.log('added'); //確認用
      //console.log(entry.intersectionRatio); //確認用
    //交差の割合が 0.3 以下の場合
    } else if(entry.intersectionRatio <= .3){
      entry.target.classList.remove('partInView');
      span.textContent = '';
      //console.log('removed'); //確認用
      //console.log(entry.intersectionRatio); //確認用
    }
  });
}

const observer = new IntersectionObserver(callback, options);
const targets = document.querySelectorAll('.target');
targets.forEach( (elem) => {
  observer.observe(elem);
});

<div class="gradientTarget">
  <p>IntersectionObserver Gradient</p>
</div>

/*監視対象及びグラデーションを適用する要素*/
.gradientTarget {
  /*線形グラデーション*/
  background-image: linear-gradient(
    royalblue -80%, /* 始点 */
    pink 40%,
    palegoldenrod 80%,
    mediumaquamarine 180%,
    blue 300% /* 終点 */
  );
  padding: 1rem 2rem;
  margin: 50px 0;
  width: 100%;
  max-width: 600px;
  min-height: 300px;
  color: #fff;
}

.gradientTarget p {
  line-height: 300px;
  width: 100%;
  margin: 0 auto;
  font-size: 1.75rem;
  font-weight: bold;
  text-shadow: 0.5px 0.5px 0.5px #666;
}

//閾値（threshold）を作成して返す関数
const makeThresholdArray = (count, one=false) => {
  const threshold = [];
  for(let i = 0; i < count; i++) {
    if(count > 1) {
      threshold.push(i/count);
    }
  }
  if(one) threshold.push(1);
  return threshold;
}

//グラデーションアニメーションを設定する関数
const ioGradient = () => {

  //オプション
  const options = {
    //20% 見えてからコールバック関数を呼び出す
    rootMargin: '-20% 0px',
    //0.01刻みの100個（+1）の閾値を指定（実際は30個ぐらいで十分）
    threshold: makeThresholdArray(100, true)
  };

  //コールバック関数
  const callback = (entries) => {
    entries.forEach((entry) => {
      //交差している場合
      if (entry.isIntersecting) {
        //交差の割合を％に変換（四捨五入）
        const ratio = Math.round(entry.intersectionRatio * 100);
        //交差の割合を使ってグラデーションを設定
        entry.target.style.backgroundImage = `
          linear-gradient(
            180deg,
            royalblue ${-80 - ratio}%,
            pink ${40 - ratio}%,
            palegoldenrod ${80 - ratio}%,
            mediumaquamarine ${180 - ratio}%,
            blue ${300 - ratio}%
        )`;
      }
    });
  }

  //引数にコールバック関数とオプションを指定してオブザーバーを生成
  const observer = new IntersectionObserver(callback, options);

  //監視対象の要素（gradientTarget クラスを指定した要素）を全て取得
  const gradientTargets = document.querySelectorAll('.gradientTarget');

  //全ての監視対象要素を observe() メソッドに指定
  gradientTargets.forEach( (elem) => {
    //observe() に監視対象の要素を指定
    observer.observe(elem);
  });
}
//上記関数を実行
ioGradient();

<div class="hslGradientTarget">
  <p>IntersectionObserver Gradient</p>
</div>

//閾値（threshold）を作成して返す関数
const makeThresholdArray = (count, one=false) => {
  const threshold = [];
  for(let i = 0; i < count; i++) {
    if(count > 1) {
      threshold.push(i/count);
    }
  }
  if(one) threshold.push(1);
  return threshold;
}

/*
HSL でグラデーションを生成する関数（以下の引数を受け取ります）
targetClassName：グラデーションを適用する要素のクラス名（必須）
hslOption ：HSLカラーのオプション
ratioRate：交差の割合を調整する値（大きな値ほど変化が大きくなる）
*/

//グラデーションアニメーションを設定する関数
const ioHslGradient = (targetClassName, hslOption, ratioRate) => {

  //オプション（環境に合わせて）
  const options = {
    //20% 見えてからコールバック関数を呼び出す
    rootMargin: '-20% 0px',
    //0.01刻みの100個（+1）の閾値を指定（実際は30個ぐらいで十分）
    threshold: makeThresholdArray(50, true)
  };

  //グラデーションの色（引数に値が渡されていればその値を使い、そうでなければデフォルトを設定）
  if(hslOption) {
    hslOption = hslOption;
  }else{
    //デフォルトのグラデーション
    hslOption = {
      length: 4, //カラーストップの数
      angle : '45deg', //グラデーションの角度
      hueStart: 160, //最初の色の色相の値
      hueStep: 30, //各色の色相の間隔
      saturation: '70%', //彩度
      lightness: '80%'  //輝度
    };
  }

  //交差の割合を調整する値（大きな値ほど変化が大きくなる）
  if(ratioRate) {
    ratioRate = parseInt(ratioRate);
  }else{
    ratioRate = 100; //デフォルト
  }

  //コールバック関数
  const callback = (entries) => {
    entries.forEach((entry) => {
      //交差している場合
      if (entry.isIntersecting) {
        //交差の割合を Hue に適用する値に変換（ratioRate で割合を調整）
        const ratio = Math.round(entry.intersectionRatio * ratioRate);
        //ratio と引数の値を使ってグラデーションを設定
        let gradient = ' linear-gradient( ' + hslOption.angle + ',';
        for(let i=0; i<hslOption.length; i++) {
          gradient += 'hsl(' + (parseInt(hslOption.hueStart) + parseInt(hslOption.hueStep) * i  + ratio) + ',' +
            hslOption.saturation + ',' +
            //彩度も変化させる場合は例えば上記を以下のようにするなどできます
            //parseInt(hslOption.saturation) * entry.intersectionRatio  + '%,' +
            hslOption.lightness + ') ' +
            (100/hslOption.length) * i + '%';
          if(i !== hslOption.length -1) gradient += ',';
        }
        gradient += ')';
        entry.target.style.backgroundImage = gradient;
        //gradient の値をコンソールに出力（確認用）
        //console.log(gradient);
      }
    });
  }

  //引数にコールバック関数とオプションを指定してオブザーバーを生成
  const observer = new IntersectionObserver(callback, options);

  //監視対象の要素（引数で指定された要素）を取得
  const targets = document.querySelectorAll('.' + targetClassName);
  //全ての監視対象要素を observe() メソッドに指定
  targets.forEach( (elem) => {
    //observe() に監視対象の要素を指定
    observer.observe(elem);
  });

}
//色のオプション
const hslColor = {
  length: 4,
  angle : '45deg',
  hueStart: 160,
  hueStep: 30,
  saturation: '70%',
  lightness: '80%'
};
//上記色のオプションと対象の要素、交差の割合を調整する値を指定して関数を実行
ioHslGradient('hslGradientTarget', hslColor, 70);

.hslGradientTarget {
  background-image:linear-gradient(
    45deg,
    hsl(220, 70%, 80%) 0%,
    hsl(250, 70%, 80%) 25%,
    hsl(280, 70%, 80%) 50%,
    hsl(310, 70%, 80%) 75%
  );
  padding: 1rem 2rem;
  margin: 50px 0;
  width: 100%;
  max-width: 600px;
  min-height: 300px;
}

.hslGradientTarget p {
  line-height: 300px;
  width: 100%;
  margin: 0 auto;
  font-size: 1.75rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0.5px 0.5px 0.5px #666;
}

<div class="gradientWrapper">
  <div class="gradientElem"><!--グラデーションを適用する要素 .gradientElem-->
    <p>IntersectionObserver Gradient</p>
  </div>
  <div class="targetElem"><!--監視対象の要素 .targetElem-->
    <p>Lorem ipsum dolor sit... vitae hic recusandae.</p>
    <p>Iste, nemo, ... Inventore quos harum beatae.</p>
    <p>Sint magnam pariatur... possimus voluptate.</p>
  </div>
</div>

//閾値（threshold）を作成して返す関数
const makeThresholdArray = (count, one=false) => {
  const threshold = [];
  for(let i = 0; i < count; i++) {
    if(count > 1) {
      threshold.push(i/count);
    }
  }
  if(one) threshold.push(1);
  return threshold;
}

//グラデーションアニメーションを設定する関数
const ioGradientWithTarget = () => {

  const options = {
    //0.0333刻みの30個（+1）の閾値を指定（別途定義した関数 makeThresholdArray を使用）
    threshold: makeThresholdArray(30, true)
  };

  const callback = (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const ratio = Math.round(entry.intersectionRatio * 100);

        //グラデーションを適用する要素（監視対象の親要素から .gradientElem を取得）
        const gradientElem = entry.target.parentElement.querySelector('.gradientElem');

        //交差の割合を使ってグラデーションを（グラデーションを適用する要素に）設定
        gradientElem.style.backgroundImage = `
          linear-gradient(
            90deg,
            royalblue ${-80 - ratio}%,
            pink ${40 - ratio}%,
            palegoldenrod ${80 - ratio}%,
            mediumaquamarine ${180 - ratio}%,
            blue ${300 - ratio}%
        )`;
      }
    });
  }
  //オブザーバーを生成
  const observer = new IntersectionObserver(callback, options);

  //監視対象の要素（targetElem クラスを指定した要素）を全て取得
  const targets = document.querySelectorAll('.targetElem');

  targets.forEach( (elem) => {
    //observe() に監視対象の要素を指定
    observer.observe(elem);
  });
}
//上記関数を実行
ioGradientWithTarget(); 

<div class="wrapper">
<h1> IntersectionObserver Scroll Spy Sample </h1>
  <nav class="nav-wrapper">
    <ol id="navigation" class="nav">
      <li><a href="#section1">Section 1</a></li>
      <li><a href="#section2">Section 2 </a></li>
      <li><a href="#section3">Section 3</a></li>
      <li><a href="#section4">Section 4</a></li>
      <li><a href="#section5">Section 5</a></li>
    </ol>
  </nav>
  <main class="contents">
    <div class="linkTarget" id="section1">
      <h2>Section 1</h2>
      <p>Lorem ipsum dolor sit amet, ... ipsa ad tenetur in.</p>
      ・・・中略・・・
    </div>
    <div class="linkTarget" id="section2">
      <h2>Section 2</h2>
      <p>Lorem ipsum dolor sit amet, ... sint enim.</p>
       ・・・中略・・・
    </div>
    <div class="linkTarget" id="section3">
      <h2>Section 3</h2>
      <p>Lorem ipsum dolor sit amet, ...veniam velit deleniti.</p>
       ・・・中略・・・
    </div>
    <div class="linkTarget" id="section4">
      <h2>Section 4</h2>
      <p>Lorem ipsum dolor sit amet,...rerum dolorum doloremque.</p>
       ・・・中略・・・
    </div>
    <div class="linkTarget" id="section5">
      <h2>Section 5</h2>
      <p>Lorem ipsum dolor sit amet, ...voluptatum animi maxime.</p>
       ・・・中略・・・
    </div>
  </main>
</div>
<div class="footer"></div><!--フッターにある程度の高さを指定-->
<div id="scroll-to-top"><!--トップへスクロールするボタン-->
  <p>Top</p>
</div>

/*
ioScrollSpy() には以下の引数を指定します。

rootSelector：監視対象の領域のセレクタ（デフォルトは null でビューポート全体）
rootMargin ：交差する境界を指定する rootMargin オプションに指定する値。デフォルトは '-25% 0px -75%'
targetClass ：監視対象の要素のクラス名（ドットは不要）。デフォルトは 'target'
navSelector：メニュー項目の要素のセレクタ（querySelector に指定する値）デフォルトは '.nav'
activeClass：現在交差しているアクティブな要素に指定するクラス名。 でふぉるとは 'active'
*/

const ioScrollSpy = (rootSelector=null, rootMargin='-25% 0px -75%', targetClass='target', navSelector='.nav', activeClass='active') => {

  //監視対象の要素を取得
  const targets = document.querySelectorAll('.' + targetClass);

  //オプション
  const options = {
    root: rootSelector ===null ? null : document.querySelector(rootSelector),
    //上から25%の位置を交差の境界とする
    rootMargin: rootMargin,
    threshold: 0 //デフォルトなので省略可能
  }
  //コールバック関数
  const callback = (entries) => {
    // 交差を検知をしたら
    entries.forEach(entry => {
      //監視対象の要素が領域（境界）と交差していれば（isIntersecting が true の場合）
      if (entry.isIntersecting) {
        //その要素を引数として以下の関数を呼び出してメニューをハイライト
        highlightNavMenu(entry.target);
      }
    });
  }
  //オブザーバーを生成
  const observer = new IntersectionObserver(callback, options);

  //それぞれの監視対象の要素を observe() に指定して監視
  targets.forEach( (target) => {
    observer.observe(target);
  });
  //メニュー項目をハイライトする（色を変える）関数
  const highlightNavMenu = (target) => {
    //現在アクティブになっている（active クラスが付与されている）メニューの要素を取得
    const highlightedMenu = document.querySelector(navSelector + ' ' + '.' + activeClass);
    //上記で取得した要素が存在すれば、その要素から active クラスを削除
    if (highlightedMenu !== null) {
      highlightedMenu.classList.remove(activeClass);
    }
    //引数で渡された現在交差している（isIntersecting が true の）要素の id 属性からリンク先（href）の値を生成
    const href = '#' + target.id;
    //上記で生成したリンク先を持つメニューが、現在交差している要素のリンク
    const currentActiveMenu =  document.querySelector(`a[href='${href}']`);
    //現在交差している要素のリンクに active クラスを追加
    currentActiveMenu.classList.add(activeClass);
  }
}
//上記で定義した関数に引数を指定して呼び出す
ioScrollSpy(null, '-25% 0px -75%','linkTarget', '#navigation');

//オプション
const options = {
  //監視対象の領域（wrapper クラスを指定した要素）を指定
  root: document.querySelector('.wrapper'),
}

//コールバック関数
const callback = (entries) => {
  //コールバック関数の処理
}

//オプションを指定してオブザーバーを生成
const observer = new IntersectionObserver(callback, options);

const options = {
  //実際に見えるより 50px 前で交差していると判定させる（root の周囲を50px拡大）
  rootMargin: '50px'
}

const observer = new IntersectionObserver(callback, options);  

const options = {
  threshold: 0 //デフォルト（省略時と同じ）
}

const options = {
  threshold: 1
}

const options = {
  threshold: [0, 0.5, 1]
}

const callback = (entries, observer) => {
  entries.forEach( entry => {
    //監視対象の要素が監視している領域に入っている場合にのみ実行
    if (entry.isIntersecting) {
      console.log(entry.isIntersecting);
    }
  });
}

const callback = (entries, observer) => {
  entries.forEach( entry => {
    //以下は交差状態に関わらずコールバック関数が呼び出されたら実行される
    console.log(entry.isIntersecting);
  });
}

const callback = (entries) => {
  entries.forEach( entry => {
    //呼び出されて対象の要素が領域に入っていれば（交差していれば）
    if (entry.isIntersecting) {
      //カウントアップ（カウントを1増加）
      countSpan.textContent = ++count;
    }
    //呼び出されれば交差の状態に関わらずカウントアップ（カウントを1増加）
    countSpan.textContent = ++count; 
  });
}

//コールバック関数
const callback = (entries, observer) => {
  entries.forEach( entry => {
    //監視対象の要素が領域と交差している場合の処理
    if (entry.isIntersecting) {
      //監視対象の要素が領域と交差している割合
      const ratio = entry.intersectionRatio;
      //交差している割合を出力（確認用）
      ratioSpan.textContent = ratio;
      //交差している割合（threshold に対応）により背景色を変更
      if(ratio >= 0 && ratio < .25) {
        entry.target.style.backgroundColor = 'cornflowerblue';
      }else if(ratio >= .25 && ratio < .5) {
        entry.target.style.backgroundColor = 'darkseagreen';
      }else if(ratio >= .5 && ratio < .75) {
        entry.target.style.backgroundColor = 'orange';
      }else{
        entry.target.style.backgroundColor = 'palevioletred';
      }
    }
  });
}

//オプション
const options = {
  //監視対象の領域（wrapper クラスを指定した要素）を指定
  root: document.querySelector('.wrapper'),
  //閾値（コールバック関数を呼び出すタイミング）のリスト
  threshold: [0, 0.25, 0.5, 0.75]
}

//オブザーバーを生成
myObserver = new IntersectionObserver(callback, options);

//監視対象の要素を取得
const target = document.querySelector('.target');

//オブザーバーに監視対象の要素を指定
myObserver.observe(target);

//交差している割合を出力する要素（確認用）
const ratioSpan = document.querySelector('#ratio span');

//スライダーのイベント
document.querySelector('input[name="height"]').addEventListener('input', (e) => {
  const targetHeightValue = e.currentTarget.value;
  target.style.setProperty('height', targetHeightValue + 'px');
  target.style.setProperty('line-height', targetHeightValue + 'px');
}); 

<div class="wrapper">
  <div class="target">監視対象の要素</div>
</div>
<p id="ratio">intersectionRatio： <span></span></p>
<input type="range" name="height" min="100" max="600" value="160" step="10">

.wrapper {
  height: 200px;
  width: 300px;
  border: 1px solid #ccc;
  overflow: scroll;
}
/*監視対象の要素*/
.target {
  width: 160px;
  height: 180px;
  margin: 200px auto;
  color: #fff;
  text-align: center;
  line-height: 200px;
  background-color: cornflowerblue;
  transition: background-color 1s; /*トランジション*/
}

//コールバック関数
const callback = (entries, observer) => {
  //entry は IntersectionObserverEntry オブジェクト
  entries.forEach( entry => {
    //監視対象の要素が監視している領域に入っていれば
    if (entry.isIntersecting) {
      //クラスに blue が含まれていれば
      if(entry.target.classList.contains('blue')) {
        //intersectionRatio の値を使って scale() に指定する値を作成
        const scale = 0.3 + 0.7 * entry.intersectionRatio;
        //transform に scale() を設定
        entry.target.style.setProperty('transform', `scale(${scale})`);
        //クラスに red が含まれていれば
      }else if(entry.target.classList.contains('red')) {
        //opacity の値に intersectionRatio の値を設定
        entry.target.style.setProperty('opacity', entry.intersectionRatio);
      }
    }
  });
}

//count で指定した数の threshold の値を返す関数
const makeThresholdArray = (count) => {
  const threshold = [];
  for(let i = 0; i < count; i++) {
    threshold.push(i/count);
  }
  return threshold;
}

//オプション
const options = {
  //監視対象の領域（wrapper クラスを指定した要素）を指定
  root: document.querySelector('.wrapper'),
  //閾値のリスト（0.01 刻みの100個の値）
  threshold: makeThresholdArray(100)
}

//オブザーバーを生成
myObserver = new IntersectionObserver(callback, options);

//監視する対象の要素（target クラスを指定した要素）を全て取得
const targets = document.querySelectorAll('.target');

//全ての対象の要素に対して
targets.forEach( (elem) => {
  //observe() メソッドに監視対象の要素を指定
  myObserver.observe(elem);
});  

<div class="wrapper">
  <div class="target blue">監視対象の要素1</div>
  <div class="target red">監視対象の要素2</div>
</div>

const callback = (entries, observer) => {
  entries.forEach( entry => {
    //監視対象の要素が領域内に入った場合
    if (entry.isIntersecting) {
      //fadeIn クラスを追加
      entry.target.classList.add('fadeIn');
      //第２引数の observer の unobserve() メソッドで各要素の監視を停止
      observer.unobserve(entry.target);
    }
  });
}

const options = {
  //監視対象の領域を指定
  root: document.querySelector('.wrapper'),
}

//オブザーバーを生成
const myObserver = new IntersectionObserver(callback, options);

//監視する対象の要素を全て取得
const targets = document.querySelectorAll('.target');

//全ての対象の要素に対して
targets.forEach( (elem) => {
  //observe() メソッドに監視対象の要素を指定
  myObserver.observe(elem);
});