【React】useInViewとcss animateを使って、スクロールに連動して要素を出現させる方法

概要

本記事では、ReactのライブラリであるuseInViewとCSSのアニメーションライブラリであるanimate.cssを使用して、スクロールに連動して要素を出現させる方法を紹介します。

具体的には、画面をスクロールして特定の位置に到達した際、要素がアニメーションと共に表示される仕組みを実装します。

↓イメージ

前提知識

• Reactの基本的な知識
• React Hooksの基本的な知識
• CSSの基本的な知識

背景

ウェブページを訪れるユーザーに対して、動きのあるインタラクティブな要素を提供することで、ユーザーエクスペリエンスを向上させることができます。

特に、スクロールに連動して要素がアニメーションと共に表示される効果は、視覚的な魅力を高め、ユーザーの注意を引くことができます。

本記事では、このような効果を簡単に実現する方法を説明します。

学んだ技術の説明

技術の概要

useInView

Reactでスクロールや要素の表示状態をトリガーにするためのフックです。
要素がビューポートに入ったかどうかを監視し、指定された条件に応じて処理を実行します。

animate.css

シンプルで使いやすいCSSアニメーションライブラリです。
多様なアニメーション効果を提供し、クラス名を追加するだけで簡単に使用できます。

インストールと設定

まず、必要なライブラリをインストールします。

npm install animate.css react-intersection-observer

基本的な使い方

以下に、useInViewとanimate.cssを使用して要素がスクロールに連動してアニメーション表示される例を示します。

"use client";

// animate.cssをインポート
import "animate.css";
// useInViewをインポート
import { useInView } from "react-intersection-observer";

const Home = () => {
  // useInViewを使ってrefとinViewを定義
  const { ref, inView } = useInView({
    //　ref要素（以下JSX内）が画面上に現れてから170px過ぎた時、inViewがtrueになる。
    rootMargin: "-170px",
    // 最初の一度だけ実行
    triggerOnce: true,
  });

  return (
    <>
      <div className=" my-[500px]">↓スクロールしてください。</div>
      <div className=" my-[500px]">↓スクロールしてください。</div>
      {/* ref要素 */}
      <div
        ref={ref}
        className={`bg-blue-500 w-56 h-28 ${
          // inViewがtrueになったら、CSSアニメーションを使用して要素を表示
          inView ? "animate__animated animate__rotateInUpLeft" : "opacity-0"
        }`}
      >
        対象の要素
      </div>
      <div className=" my-[1000px]" />
    </>
  );
};

export default Home;

まとめ

useInViewとanimate.cssを組み合わせることで、スクロールに連動したアニメーションを簡単に実装することができます。

ユーザーエクスペリエンスを向上させるために、ぜひ試してみてください。

参考資料