【JS版】要素が画面に入ってきたら色々する処理

以前投稿した処理のバニラJavascript版。

/**
 * スクロール時アニメーションclassを付与
 * @param $elements Element
 */
const scrollAnimation = $elements => {
  // スクロール位置(量)
  const windowPosY = window.innerHeight + window.scrollY;
  // 要素が現れる前のバッファ
  // ウィンドウの1/5の高さをデフォルトに設定
  const buffer = window.innerHeight / 5;

  document.querySelectorAll($elements).forEach($el => {
    // アニメーション発火位置
    const targetTop = Number($el.getBoundingClientRect().top + window.scrollY) + buffer;
  
    if(windowPosY > targetTop) {
      $el.classList.add('inview');
    }
  })
}

要素が画面に入ったときのバッファを固定値ではなくウィンドウの高さで変えられるので、レスポンシブにもある程度柔軟に対応できる。

なお発火する際の記述は

window.addEventListener('scroll', () => {
  scrollAnimationHook('.hoge');
})

DOMが読み込まれたときにも動作したほうがいい場合が多いので、その場合はdocument.addEventListener('DOMContentLoaded', ()=>{})で発火するといい。

Recent Posts

Recent Column