particles.jsでオーブがゆっくり動く静けさの表現

⚠この記事が公開されたのは 2022年10月4日で、内容が古く、間違っている可能性があります。

日中、光が差し込む静かな場所にいると微細なホコリが静かに動きながら光に反射し、何とも言えない幻想的な雰囲気を感じることがあります。
そんなオーブ(ホコリと言うのもアレなのでここではオーブと呼ぶことにします)をparticle.jsを使って表現する方法です。

デモ

わかりにくいかもしれませんが、じっと見ているとうっすら白い円が動いているのがわかります。

必須ライブラリ

  • particles.js 2.0.0

インストール

index.html

CDNを利用する場合はscriptタグをHTMLの任意の場所に記述

bodyの閉じタグ直前の例

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

パーティクルを表示する要素を任意の場所に記述

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


style.css

#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-image: url("https://blog.bytedesign.net/wp-content/uploads/2022/10/ruin.jpg"); //任意の背景画像(白いオーブとのコントラストでダーク系の背景などにするとオーブが目立ちます)
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
#particles-js canvas {
filter: blur(1px); //オーブをblurでぼかすとよりリアルな雰囲気になります
}

script.js

particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": 6, //オーブの数
      "density": { //オーブの密度
        "enable": true,
        "value_area": 1500 //オーブの密度
      }
    },
    "color": {
      "value": "#d9deff" //オーブの色(薄いパープル)
    },
    "shape": {
      "type": "circle", //オーブの形(円)
      "stroke": {
        "color": "#000" //オーブの外罫線の色(黒)
      },
    },
    "opacity": {
      "value": 0.4, //オーブの透明度
      "random": true, //オーブごとに透明度をランダム化(する)
      "anim": {
        "enable": false, //オーブの透明度のアニメーション(しない)
        "speed": 2.5, //オーブの透明度のアニメーションのスピード(秒)
        "opacity_min": 0.1, //オーブの透明度の最小値
        "sync": false //オーブの透明度を同時にアニメーション(しない)
      }
    },
    "size": {
      "value": 20, //オーブのサイズ(px)
      "random": true, //オーブのサイズをランダム化(する)
      "anim": {
        "enable": true, //オーブのサイズのアニメーション(する)
        "speed": 3.2, //オーブのサイズのアニメーションのスピード(秒)
        "size_min": 10, //オーブのサイズの最小値(px)
        "sync": false //オーブのサイズを同時にアニメーション(しない)
      }
    },
    "line_linked": {
      "enable": false, //オーブ間を線でつなぐ(しない)
    },
    "move": {
      "enable": true, //オーブの移動(する)
      "speed": 4, //オーブの移動スピード
      "direction": "none", //オーブの移動方向(なし)
      "random": true //オーブの移動のランダム化(する)
    }
  },
  "interactivity": { //操作に対する反応
    "detect_on": "canvas", //検知の対象
    "events": {
      "onhover": {
        "enable": false, //マウスオーバー(検知しない)
      },
      "onclick": {
        "enable": false, //クリック(検知しない)
      },
      "resize": false //リサイズ(検知しない)
    },
  },
  "retina_detect": true //レティーナディスプレイに対応(する)
});

使い方

以上でオーブが動き出すと思いますが、より細かい設定をしたい場合は
githubにあるoptionsを参考にしてください。
https://github.com/VincentGarreau/particles.js/

また公式サイトではプレビューしながらGUIで簡単に設定可能です。
https://vincentgarreau.com/particles.js/
公式サイトで設定が完了したら”Download current config(json)”でjsonファイルをダウンロードするか、CodePenのリンクからソースコードをコピーして使用できます。