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

JavaScript

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

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

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

React Particles-JS - Demo

インストール方法

npm install react-particles-js

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

基本は以下の形です。

import Particles from 'react-particles-js';

export default function App() {
    ...
    <Particles/>
    ...
}

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

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

import Particles from 'react-particles-js';

export default function Hero_particles() {
  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>
  );
}

タイトルとURLをコピーしました