【JavaScriptライブラリ/React Particles-js】簡単にParticleアニメーションを作る

しゃぼん玉のような丸がふわふわ飛ぶアニメーションを作りたくて、実際に使用したJSライブラリを紹介します。上のGIFは実際に私が作ったものです。

どんなアニメーションが作れるのか
インストール方法
あとはインポートして、微調整

どんなアニメーションが作れるのか

こちらにデモが載っているので、ぜひ見てみてください。

インストール方法

# npm の場合
npm install react-particles-js

# yarn の場合
yarn add react-particles-js

あとはインポートして、微調整

基本は以下の形です。

import React from 'react';
import Particles from 'react-particles-js';

export default function Screen() {
  return (
    <Particles/>
  )
}

あとは、Propsなどを自分好みに調整します。Propsについての詳細はこちらで説明されています。

参考までに、以下は私が微調整したものは以下です。

import React from 'react';
import Particles from 'react-particles-js';

export default function HeroParticles() {
  return (
    <div id="hero">
      <Particles
        params={{
          "particles": {
            "number": {
              "value": 50,
              "density": {
                "enable": false
              }
            },
            "size": {
              "value": 50,
              "random": true,
              "anim": {
                "speed": 4,
                "size_min": 0.3
              }
            },
            "line_linked": {
              "enable": false
            },
            "move": {
              "random": true,
              "speed": 1,
              "direction": "top",
              "out_mode": "out"
            }
          },
          "interactivity": {
            "events": {
              "onhover": {
                "enable": true,
                "mode": "bubble"
              },
              "onclick": {
                "enable": true,
                "mode": "repulse"
              }
            },
            "modes": {
              "bubble": {
                "distance": 250,
                "duration": 2,
                "size": 0,
                "opacity": 0
              },
              "repulse": {
                "distance": 400,
                "duration": 4
              }
            }
          }
        }}
      />
      <div className="hero_message">
        <h1>Particles</h1>
      </div>
    </div>
  );
}