【JSで紙吹雪】particles.jsの使い方

2021年12月28日2024年4月11日

今回はJavaScriptで紙吹雪を表現するライブラリ「particles.js」の使い方を紹介します。

particles.jsの使い方

まずは初心者が陥りやすい注意点から。

particleではなく、particle”s“です。

これを意識していないと、後々id指定などをするときに

ちゃんとparticleって入力したしエラーもないのに動かん・・・

と混乱する原因になりますので、sの存在をお忘れなく。

さて、それでは本題に本題に入っていきましょう。

まずは完成品

See the Pen HowToUseParticles.js by yukiwebcreate (@Yukiwebcreate) on CodePen.

このままコピペでも使えます。

ただもう少し理解したい人は続きを読んでください。

HTML

<div class="page" id="particles">
  <h1>Congrats!!</h1>
</div>

後で紹介するJSの中で、「particlesというidの範囲に紙吹雪を吹かす」と記述するのでHTMLではidを意識してください。

CSS

.page {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  
  h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 30px;
    transform: translate(-50%,-50%);
    color: #fff;
    z-index: 1; //紙吹雪よりも表に出してくる
  }
}

particles.jsを使う際にはCSSで特筆すべきところはないと思います。が、

敢えていうなら最後のz-indexを調整しないと、文字や画像、ボタンなどが紙吹雪の裏に回って選択できないことなどがあるので、

適宜調整値として入れておきましょう、というくらいです。

JS

さて、こちらが肝になります。

今回、particles.jsそのものはCDNで利用しています。

particles.jsに必要なものは、ライブラリ本体以外に、設定値を記述したjsが必要になります。

下記のJSが設定値になりますが、ファイル名はなんでもいいです。例えば「setting.js」や「particles-option.js」など

自分で自由に決めてライブラリ本体とともに読み込んでください。

particlesJS("particles",{ //ここに書くのがHTMLのidに対応するもの
	"particles":{
		"number":{
			"value":50,//紙吹雪の数
			"density":{
				"enable":false,
				"value_area":200
			}
		},
		"color": {
        "value": ["#EA5532", "#F6AD3C", "#FFF33F", "#00A95F", "#00ADA9", "#00AFEC","#4D4398", "#E85298"]//紙吹雪の色の種類
		},
		"shape":{
			"type":"polygon",//形状はPolygon,つまり多角形
			"stroke":{
				"width":0,
			},
			"polygon":{
				"nb_sides":4//多角形の角の数
			}
			},
			"opacity":{
				"value":1,
				"random":false,
				"anim":{
					"enable":true,
					"speed":20,
					"opacity_min":0,
					"sync":false
				}
			},
			"size":{
				"value":5,
				"random":true,//サイズをランダムにする
				"anim":{
					"enable":true,
					"speed":1,
					"size_min":1,
					"sync":false
				}
			},
			"line_linked":{
				"enable":false,
			},
			"move":{
				"enable":true,
			"speed":5,//小さくするとゆっくり、大きくすると速くなる
			"direction":"bottom",//落ちる向き
			"random":false,//動きをランダムにするか
			"straight":false,//まっすぐ落ちるかどうか
			"out_mode":"out",//画面の外に出るか
			"bounce":false,//跳ね返るかどうか
				"attract":{
					"enable":false,
					"rotateX":600,
					"rotateY":1200
				}
			}
		},
		"interactivity":{
			"detect_on":"canvas",
			"events":{
				"onhover":{
					"enable":false,
				},
				"onclick":{
					"enable":false,
				},
				"resize":true
			},
		},
		"retina_detect":true
	});

主要な影響を与える設定値のところにはコメントで説明を書きました。

多角形の数を変えたり、紙吹雪の数やスピードを変えてカスタマイズしてみましょう。