はじめに

Webページに動くパーティクルやユーザーの操作に反応するエフェクトを追加したいと思ったことはありませんか？
particles.jsは、美しいパーティクルアニメーションを簡単に実装できるJavaScriptライブラリです。これを使えば、インタラクティブで魅力的な背景を作成できます。

公式のデモサイトでは、設定を自由に調整しながら、実際にパーティクルの動きを確認できます。
https://vincentgarreau.com/particles.js/#default

例

Particle.jsの読み込み方法

ライブラリ（particles.js）を読み込みます。
方法1. CDNを使用する場合:
HTMLファイルの<head>または</body>タグの直前にスクリプトを追加します。

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

方法2. ローカルに保存する場合
公式GitHubからparticles.min.jsをダウンロードし、プロジェクト内に保存します。

<!-- パスは自身のプロジェクトに合わせる -->
<script src="assets/js/particles.min.js"></script>

パーティクル表示用のHTML要素

パーティクルを描画するための要素を準備し、設定用のファイルを読み込む。

  <div id="particles-js"></div>

  <script src="particles-config.js"></script>

基本的なCSS設定

ここでは、パーティクルを視認しやすくするために、一旦背景色を黒に設定します。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#particles-js {
  background-color: black;
}

パーティクル設定例 (JavaScript)

パーティクルのサイズや動きを設定します。
以下は一例です。カスタマイズしたい場合は、公式のデモサイトで調整してからコピペすると便利です。
各オプションの詳細については公式ドキュメントで説明されています。

particles-config.js

//id(particles-js)はHTMLで設定したものを入れる
particlesJS("particles-js", {
  particles: {
    number: {
      value: 100,
      density: {
        enable: true,
        value_area: 800
      }
    },
    color: {
      value: ["#E0FFFF", "#90f8fe", "#25bffe", "#215295", "#fcfdba"] // 複数の色でパーティクルをランダムに着色
    },
    shape: {
      type: ["circle","star"] // パーティクルの形状（円と星）
    },
    opacity: {
      value: 0.8,
      random: true,
      animation: {
        enable: true,
        speed: 1,
        opacity_min: 0.4,
        sync: false
      }
    },
    size: {
      value: 6,
      random: true,
      animation: {
        enable: true,
        speed: 2,
        size_min: 2,
        sync: false
      }
    },
    move: {
      enable: true,
      speed: 4,
      direction: "none",
      random: false,
      straight: false,
      out_mode: "bounce", // 画面端でバウンド
      bounce: false,
      attract: {
        enable: true,
        rotateX: 600,
        rotateY: 1200
      }
    },
    line_linked: {
      enable: true, // パーティクル同士を線で結ぶ
      distance: 140, // 線を結ぶ最大距離
      color: "#ffffff",
      opacity: 0.5,
      width: 1
    }
  },
  interactivity: {
    detect_on: "canvas",
    events: {
      onhover: {
        enable: true,
        mode: "bubble" // ホバー時のエフェクト
      },
      onclick: {
        enable: true,
        mode: "push" // クリック時にパーティクルを追加
      },
      resize: true
    },
    modes: {
      bubble: {
        distance: 200,
        size: 9,
        duration: 2,
        opacity: 1,
        speed: 3
      },
      push: {
        particles_nb: 8
      }
    }
  },
  retina_detect: true
});

こんな感じになりました。

仕上げ

これだけだと少し寂しいので、画面中央にテキストを配置して、背景にグラデーションを入れるなど全体的にスタイルを整えます。

デモページはこちら。

このように、particles.jsを使えば簡単にアニメーション付きのページが作成できます。
他にもこんな使い方ができます。

ローディング画面に動くエフェクトを加える
特定のイベント（クリックやスクロール）でアニメーションを発生させる
季節に合わせてパーティクルのデザインを変更する（桜や雪など）

弊社のサイトでもparticles.jsを使用していますので、ぜひチェックしてみてください！！
https://ob-g.com/core/

オブジェクティブグループではXの投稿も平日毎日行っています！
IT関連の小ネタや便利技から、日常のアニメ・ゲーム布教なども幅広く投稿してるので、
ご興味のある方は是非フォロー・いいねをお願いします。
https://x.com/obg_ocr