この記事は、株式会社エイチームフィナジー の Advent Calendar 2020 6日目の記事になります。
6日目は、React環境でスクロール連動エフェクトを実装する際に便利な
react-intersection-observerについて、デザイナーの@masaki632dがご紹介します。
背景
現在、React(JSフレームワーク)とEmotion(CSSinJS)を導入した環境でタスクを進めており、
特定の高さまでスクロールしてきた時にテキストにマーカーが引かれるやつを実装する機会がありました。
当初は、JavaScriptのscrollイベントやwindow.pageYOffsetなどを使って一度実装したのですが、
この手法だとスクロールのたびに関数が呼び出されるため、パフォーマンスに影響を及ぼしてしまうようです。
scrollイベントの手法で実装後、ふとエンジニアから、
「最近はこれで実装するのがパフォーマンスも軽くて良きです」と紹介されたのが、
「Intersection Observer」 でした。（名前がカッコ良い）
なるほど！と思った数日後には、
エンジニア側で軽やかに「Intersection Observer」で実装完了されており、
表示を確認すると、特定の高さまでスクロールしてきた時にテキストにマーカーが引かれるやつがしっかり再現されていました。
今後同じような実装が必要になった時、自分の方でも軽やかに実装したいと思ったのと、
せっかくのReact環境ということで、
今回はreactと名前の付いたreact-intersection-observerで実装を試してみました。
Intersection Observer とは
「Intersection（要素間の交差）」を「Observe（監視）」するAPIのことです。
指定したDOM要素の交差点（DOM）を監視することができます。
「Intersection Observer」の詳細はこちら
ブラウザサポートも拡充しており、今後標準となる技術のようです。
「Intersection Observer」の対応ブラウザはこちら
react-intersection-observer とは
今回使用するライブラリ react-intersection-observer は、
上記の Intersection Observer API をReactで簡単に扱うためのライブラリになります。
「react-intersection-observer」の詳細はこちら
何はともあれ実装
-
$ yarn add でライブラリ
react-intersection-observerをインストールします。 （package.jsonとyarn.lockに 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
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をご紹介しました。
とても簡単で便利ですので、ぜひ一度使ってみてください。