はじめに
フロントエンドでReactやNextJSを使用しているときにスクロールアニメーションをコンポーネント化して簡単に使用する方法を見つけたので、共有します。
スクロールアニメーションを実装する
アプリケーションやWebサイトを作成する時にアニメーションがあったりすると途端に本格的に見えたりしますが、CSSで実装するのは中々面倒だったりします。
今回紹介するのは「scrollreveal」というライブラリとReactを使用して再利用性の高いアニメーションコンポーネントを作成していきたいと思います。
ScrollReveal
ScrollRevealはJavascriptでスクロールアニメーションが実装できるようになるライブラリで、よくWebサイトで見る「スクロールしたらふわっと出てくる」アニメーション効果を与えてくれます。
公式ドキュメント
使用するには、scriptタグで読み込むかnpm(yarn)でライブラリをインストールします。
//scriptで読み込み
<script src="https://unpkg.com/scrollreveal"></script>
//npm(yarn)でインストール
npm i -S (yarn add) scrollreveal
typescriptを使用している方は、別途型定義ファイルも必要なので、インストールします。
npm i -S -D(yarn add -D) @types/scrollreveal
アニメーション効果をつけるにはScrollReveal().reveal()メソッドで対象のclass等を指定すれば、簡単にアニメーション効果をつけることができます。
//第二引数で効果時間の設定等が可能。詳しくは公式ドキュメントを参照して下さい
ScrollReveal().reveal('.container', {
duration: 500,
reset: true
})
Reactでコンポーネント化
次にReactで要素をラップすればアニメーション効果を付与できるコンポーネントを作成します。
ScrollRevealContainer.tsx
import { FC, useRef, useEffect } from "react";
import scrollReveal from "scrollreveal";
interface ScrollRevealContainerProps {
move?: string;
}
const ScrollRevealContainer: FC<ScrollRevealContainerProps> = ({
children,
move
}) => {
const sectionRef = useRef<HTMLElement>(null);
useEffect(() => {
if (sectionRef.current)
scrollReveal().reveal(sectionRef.current, {
reset: true,
delay: 400,
opacity: 0,
origin:
move === "left"
? "left"
: move === "right"
? "right"
: move === "top"
? "top"
: "bottom",
distance: "40px"
});
}, [sectionRef]);
return <section ref={sectionRef}>{children}</section>;
};
export default ScrollRevealContainer;
このコンポーネントではReactのuseRef,useEffectを用いてアニメーション発動のタイミングを設定しています。
まずuseRefでこのコンポーネントまでスクロールした時にDOMを参照し、useEffectでDOMが参照される度にscrollrevealのメソッドを実行するようにします。
また任意でpropsを渡せるようにしており、left,right,top,bottomの中から渡した値の方向からコンポーネントがスクロールして表れるようにしています（何もpropsを渡さなければ下部から表れます）。
あとはアニメーションを実装したい要素をこのコンポーネントで囲むだけです。
app.tsx
import ScrollRevealContainer from "./ScrollRevealContainer";
export default function App() {
return (
<>
<div style={{ marginBottom: "400px" }}></div>
<ScrollRevealContainer move="right">
<h1>右から登場</h1>
<h2>Edit to see some magic happen!</h2>
</ScrollRevealContainer>
<ScrollRevealContainer move="left">
<h1>左から登場</h1>
<h2>Edit to see some magic happen!</h2>
</ScrollRevealContainer>
<ScrollRevealContainer move="top">
<h1>上から登場</h1>
<h2>Edit to see some magic happen!</h2>
</ScrollRevealContainer>
{/* ↓props「move」に何も指定しなければ「origin」は「bottom」になる */}
<ScrollRevealContainer>
<h1>下から登場</h1>
<h2>Edit to see some magic happen!</h2>
</ScrollRevealContainer>
</>
);
}
このように要素をScrollRevealContainerコンポーネントで囲むだけで簡単に実装できました！
実際にはこのように動作するので確認してみて下さい↓
Code Sandbox
NextJSで使用する際の注意点
Reactでは上記の方法で動作するのですが、同じ方法をNextJSで実装するとdocument is not defindというエラーが表示されます。
これはレンダリング方法の違いによって起こるものであり、NextJSは開発モード時デフォルトでSSR(Server Side Rendering)でレンダリングされるのですが、サーバーサイドに存在しないdocumentを参照しているためにこのようなエラーが発生します。
解決方法としてはnext/dynamicを使用してコンポーネントを動的インポートし、さらにオプションssr:falseを指定して対象のコンポーネントをSSRさせないようにすればOKです。
app.tsx
//動的インポートを使用し、オプションでSSRさせないよう設定
const ScrollRevealContainer = dynamic(
import('./ScrollRevealContainer'),
{ssr: false,}
);
こうすればエラーが解消されます！
参考：Next.jsでwindow is not definedを解決する(依存ライブラリ対応)
まとめ
React(NextJS)を使用して再利用性の高いアニメーションコンポーネントで作成できました。
今後も新しい情報が入り次第随時更新していきます。
↧