【React】particles.js で動く背景を作る

概要

particles.jsを使うと、背景が動くちょっと面白いサイトを作ることができます。

公式デモサイトで、パラメーターをいじりながらアニメーションを試すことができます。

環境

• React － 17.0.2
• TypeScript － 4.4.2
• react-particles-js － 3.5.3
• npm － 7.23.0

インストール

プロジェクトフォルダを作成して、Create React Appでプロジェクトを作成します。

cmd

npx create-react-app . --template typescript

react-particles-jsをインストールします。

cmd

npm i react-particles-js

react-particles-jsがReact（17.x）に対応していない場合、--forceオプションを付けてインストールできます。

実装

コーディング

コーディングはとても簡単です。
スタイリングは、CSS-in-JSとしてemotionを使っています。

import React, { VFC } from 'react';
import Particles from 'react-particles-js';
import { IOptions, RecursivePartial } from 'tsparticles';
import { css } from '@emotion/css';
import ParticlesParams from '../assets/particles-default.json';

export const CustomParticles: VFC = () => {
    return (
        <Particles
            className={styles.particles}
            params={ParticlesParams as RecursivePartial<IOptions>}
        />
    )
}

const styles = {
    particles: css`
        position: absolute;
        width: 100%;
        height: 100%;
    `
}

設定

paramsとして、インポートしたjsonファイルを指定しています。
このjsonファイルで、色やノードの大きさ、マウス操作時のアニメーションなどの設定を行います。
これらの設定は、公式デモで試しながら調整することができます。また、その設定をjsonファイルとしてエクスポートすることができます。

設定のテンプレート

公式デモにはいくつか設定のテンプレートが用意されています。
例えば、[Snow]を選択すると、雪が降っているようなアニメーションになります。

まとめ

アニメーションはいざ実装しようとすると複雑になりがちなので、particles.jsのような簡単に使うことのできるパッケージは本当にありがたいです。
何より使ってて楽しいです