ホームページに雪や桜を降らせる「particles.js」に機能追加した話

ホームページに桜を降らそう
どーも，だるだるし です
仕事をください（定型文）

まずは答え

CodePenで ここ 見て頂いたらどんなものかはわかると思います．

他のサンプルとして こんなの もあります

要はパーティクルというもので，HPに雪を降らせたり火の粉を散らせたりという効果を付けるものです．

コードはGitHubで ここ に置いてます．

##「particles.js」とは

「particles.js」は多分どこかで見たことのある画面上のパーティクル効果を簡単に作成するライブラリ？です．

「particles.js」の使い方は参照先からGitHubに飛べると思いますのでそちらを参照してください．

何をしたか

で私が何をしたのかですが，「particles.js」は大変軽量で便利なのですが，「回転」機能と，「画像の透明度変更」が出来ません．
＊丸や四角形の透明度は変更できます

そこで，回転と，画像の透明度の変更ができるように改造したものが これ です

使い方

基本的には大本の「particles.js」に則ってますので同じように使用できますが，一応変更部分の使用方法を書いておきます．

「particlesJS（）」関数の第二引数にパラメータを渡しますが，回転させる場合はその中に以下のように「rotate」を記載します．
場所は「shape」や「color」と同格です．

"rotate": {
  "value": 360,
  "random": true,
  "anim": {
    "enable": true,
    "speed": -10
  }
},

「value」が回転角度
「random」が「true」なら各パーティクル毎に「value」以下でランダムな角度になります
「anim」の「enable」が「true」なら回転アニメーションになります
「anim」の「speed」の絶対値が大きいほど回転速度は速くなります
「speed」がプラスなら右回転，マイナスなら左回転です

おわりに

ちなみに こんなの もあります．これは非常に高機能ですが，正直重くてHP向けには実用的ではないと思いました．実用的なレベルでは今回作成したものくらいで上々と思ってます．

ずっと記事にしようと思っていたのがようやく果たせました．

npmなどは用意していないのでjsで読み込むことになりますが，よろしければご利用ください．