Particles.jsについて - 狐は豚に貢ぎたい

最近JavaScriptを勉強し始めたので使ったライブラリは自分用にここにまとめて書いておくことにします。

今回紹介するのはParticles.jsというライブラリです。

オプションが豊富で背景アニメーションに使うのにちょうど良かったです(^^)

particles.jsの公式ホームページはこちらになります。オプションをいじって自分好みの動きにした後にコードを確認できたりするので便利なサイトです。

https://vincentgarreau.com/particles.js/

使い方としては以下の通りです。

まず、公式サイトからファイルをダウンロードするか以下のURLからファイルを読み込みます。

https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js

HTMLの方では適当にdivのタグとか使って要素作ればOKです。

CSSの方では、要素をいじってアニメーションを表示させたい範囲を指定します。

背景アニメーションを扱う上では、z-indexという重なりの順序を指定するプロパティなんかも使った感じ重要でした。

次にjavascriptのファイルに以下のコードを書きます。

jsファイル


  window.onload = function() {
    var particles = Particles.init({
      selector: '要素名',
      maxParticles: 200,
      sizeVariations: 5,
      speed: 4,
      minDistance:200,
      color: ['#D0D0D0', '#DDDDDD', '#BBBBBB'],
      connectParticles: true
    });
}

オプションについては公式や調べれば他のサイトにも載っているので詳しくは書きませんが、色や速さや点の数を変えられたり、connectParticlesをtrueにするかfalseにするかで点同士を線でつなぐか選べたりします。

ちなみに一番外側に書いてあるwindow.onload = function() {}について説明しておくとこれはHTMLを読み込んだ後にこのスクリプトを読み込むということでこれを書く書かないかで動作が正常に動かなかったりサイトの速度に違いが出てくることがあります。