【JavaScript】Intersection Observer ＋ scrollイベントでパララックスを実装する

<div class="js-parallax-elm-box">
  <div class="js-parallax-elm">
    <img src="画像パス" alt="">
  </div>
</div>

.js-parallax-elm-box {
  overflow: hidden;
}
.js-parallax-elm-box img {
  display: block;
}

//Intersection Observer + Scroll Event Parallax Vanilla JS
function parallax() {
  'use strict';

  //class設定
  //表示エリア class
  const targetClass = '.js-parallax-elm-box';
  //動かす要素 class
  const childClass = '.js-parallax-elm';

  //表示エリア取得
  const targets = Array.prototype.slice.call(document.querySelectorAll(targetClass),0);
  //表示エリアが存在するかチェック
  if(targets.length === 0) {
    return;
  }

  //observer設定
  let observer = new IntersectionObserver(observerFunc, {
    root: null,
    rootMargin: '0px',
    threshold: 0
  });

  //ウィンドウの高さ取得
  let winH = window.innerHeight;
  //スクロール量（ウィンドウの上端）取得
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  //スクロール量（ウィンドウの下端）取得
  let scrollBottom = scrollTop + winH;

  //初期設定
  let setListener =  [];
  let settings =  [];
  targets.forEach((target,index) => {
    //Listener設定取得用の判別番号をセット
    target.setAttribute('data-index',index);
    //動かす要素を取得
    const child = target.querySelector(childClass);
    //動かす要素が存在するかチェック
    if(!child) {
      return;
    }
    //処理用の設定を追加
    settings.push({
      child: child,
      //比率取得：スクロールできる最大量 / (ウィンドウの高さ + 表示エリアの高さ)
      scrollRatio: (child.clientHeight - target.clientHeight) / (winH + target.clientHeight)
    });
    //scrollイベントへ渡すlistener設定
    setListener.push(
      {
        target: target,
        handleEvent: function handleEvent () {
          requestAnimationFrame(parallaxFunk.bind(target));
        }
      }
    );
    //初期表示の位置調整
    requestAnimationFrame(parallaxFunk.bind(target));
    //observer監視開始
    observer.observe(target);
  });

  //高さ更新
  let resizeID;
  window.addEventListener('resize', function() {
    clearTimeout(resizeID);
    resizeID = setTimeout(() => {
      //ウィンドウの高さ取得
      winH = window.innerHeight;
      //各要素の高さ更新
      targets.forEach((target,index) => {
        //動かす要素が存在するかチェック
        if(!settings[index].child) {
          return;
        }
        //比率取得：スクロールできる最大量 / (ウィンドウの高さ + 表示エリアの高さ)
        settings[index].scrollRatio = (settings[index].child.clientHeight - target.clientHeight) / (winH + target.clientHeight);
      });
    }, 200);
  });

  //スクロール量更新
  window.addEventListener('scroll', function() {
    //スクロール量（ウィンドウの上端）取得
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    //スクロール量（ウィンドウの下端）取得
    scrollBottom = scrollTop + winH;
  }, {passive: true});

  //observer処理
  function observerFunc(entries) {
    entries.forEach(entry => {
      //listener設定取得
      const listener =  setListener[entry.target.getAttribute('data-index')];
      if(entry.isIntersecting) {
        //画面に表示されている要素のみスクロールイベントへ追加
        window.addEventListener('scroll', listener, {passive: true});
      } else {
        //画面外のときはスクロールイベント削除
        window.removeEventListener('scroll', listener, {passive: true});
      }
    });
  }

  //パララックス位置調整関数
  function parallaxFunk() {
    //番号取得
    const index =  Number(this.getAttribute('data-index'));

    //表示エリアの位置取得
    const targetPosi =  this.getBoundingClientRect().top + scrollTop;

    //ウィンドウの高さに対するスクロール量を取得（小数点第2以下は四捨五入）
    const setVal = ((scrollBottom - targetPosi) * settings[index].scrollRatio).toFixed(1);

    //スクロール値を設定
    settings[index].child.style.transform = 'translate3d(0,'+ (setVal * -1) +'px,0)';
  }
}

//パララックス呼び出し
parallax();