🏄‍♂️

React でスクロール連動エフェクトするなら react-intersection-observer が良き

2022/10/09に公開約2,600字

背景

React(JSフレームワーク) と TypeScript と Emotion(CSS in JS) を導入した環境 で、
特定の高さまでスクロールしてきた時にテキストにマーカーが引かれるやつ を実装する機会がありました。

当初は、JavaScriptのscrollイベントwindow.pageYOffset などを使って一度実装したのですが、この手法だと スクロールのたびに関数が呼び出される ため、パフォーマンスに影響を及ぼしてしまう ようです。

今回は せっかくのReact環境ということで、パフォーマンスも良くて 導入しやすい
react-intersection-observer(名前がカッコ良い) についてご紹介します。

まず、Intersection Observer とは

Intersection(要素間の交差)Observe(監視) するAPIのことです。
指定したDOM要素の交差点 を監視することができます。
「Intersection Observer」の詳細はこちら

ブラウザサポートも拡充しており、今後標準となる技術のようです。
Can I Use - 「Intersection Observer」の対応ブラウザ状況はこちら

何はともあれ実装

  • ライブラリ react-intersection-observer をインストールします。
$ yarn add react-intersection-observer
  • コンポーネントに使用していきます。
/** @jsx jsx */
import { FC } from "react";
import { jsx } from "@emotion/core";
import { styles } from "./Styled";

import { useInView } from 'react-intersection-observer';

export const index: FC = () => {
  // Hooksを使って簡単に書くことができます。
  // refで要素を指定して、inViewを使って要素がViewに入ったかどうかを判定します。
  // Optionについては、rootMarginを設定。要素が100pxより上に入った段階でinViewを取得できます。
  const [ref, inView] = useInView({
    rootMargin: '-100px 0px',
  });

  return (
    // スクロールして要素が表示されると同時に styles.show が付与される
    <p ref={ref} css={[styles.yellow, inView && styles.show]}>
      テキストテキスト
    </p>
  );
};
  • Styled.ts(styleについては、Styled.ts に切り出す手法 で実装しています。)
import { css } from "@emotion/core";

export const styles = {
  // マーカー箇所のstyle
  yellow: css`
    width: 200px;
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    transition: 2s;
    background: -webkit-linear-gradient(
      left,
      rgb(255, 250, 153) 50%,
      transparent 50%
    );
    background-repeat: no-repeat;
    background-size: 200% 0.8em;
    background-position: 100% 0.5em;
  `,

  // スクロールして要素が表示されると同時に付与されるstyle
  show: css`
    opacity: 1;
    background-position: 0% 0.5em;
    animation: SlideIn 3s ease-out both;
    transform: translateY(-10px);
  `,
};

ブラウザをスクロールして確認すると、
テキスト箇所が表示される高さになった瞬間に、アニメーションが発火してくれました!
(動き的には、ふわっと下から表示 + マーカーが左から引かれる)

利用に便利なシチュエーション

  • 特定の高さまでスクロールしてきた時にテキストにマーカーが引かれるやつ
  • 画像の遅延ロード
  • YouTubeの自動再生
  • コンテンツの追加読み込み
    などなど

まとめ

いかがだったでしょうか?
今回は React環境 で簡単にIntersection Observer APIを使用することができる、
react-intersection-observer をご紹介しました。
とても簡単で便利ですので、ぜひ一度使ってみてください。

参考

JSでのスクロール連動エフェクトにはIntersection Observerが便利
使ってみよう!Intersection Observer!

Discussion

ログインするとコメントできます