Reactで作るふわっと上がるアニメーション

概要

今回は、IntersectionObserverを使って、ふわっと浮き上がるアニメーションです。
IntersectionObserverは、ある要素が別の要素と交差したかどうかを監視することができます。
これを用いることでスクロールを検知し、画面内に入った場合にアニメーションをすることができます。

実装

useFadeIn.tsx

import React, { useRef, useEffect } from 'react'

const ScrollComponent = ({ children }) => {
  const ref = useRef(null)

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add('is-visible')
          } else {
            entry.target.classList.remove('is-visible')
          }
        })
      }
    )

    if (ref.current) {
      observer.observe(ref.current)
    }

    return () => {
      observer.disconnect()
    }
  }, [])

  return (
    <div ref={ref} className='fade-in'>
      {children}
    </div>
  )
}

export default ScrollComponent

コードの説明をすると、
IntersectionObserverで、ビューポートの交差を監視しており、
要素が画面内に表示されると、is-visibleというクラスが追加され、
要素が画面外に出ると、is-visibleというクラスが削除されます。

そして次にCSSのコードを貼ります。
.is-visibleのクラスがつくと、表示されます。
普段は非表示になっています。
style.css

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s ease-in-out,
    transform 0.5s ease-in-out;
}

.is-visible {
  opacity: 1;
  transform: translateY(0);
}

そして実装します。
スライドアニメーションを実装したい要素を囲みます。
するとスクロール時にアニメーションがかかります。

<ScrollComponent>
<h2>スライドショー</h2>
</ScrollComponent>

まとめ

IntersectionObserverを使えば、他にも他にも色々なことが出来そうです。
簡単に実装できるので、ぜひ試してください。