幾何学模様のパーティクルアニメーションが実装できるjsプラグイン「particles.js」の使い方

ひぐま
ひぐま

今回は簡単に幾何学模様のパーティクルアニメーションが実装できるjsプラグインparticles.jsをご紹介します。
公式サイトはこちら↓
https://vincentgarreau.com/particles.js/

実際のデモ

実装デモ

こんな風に配置できます。
後述しますが、粒子の形状は画像のようにカスタマイズが豊富にできますよ～
早速実装していきましょう

particle01.jpg

JSファイルの設置

実装の際はparticles.js(もしくはparticles.min.js)とオプションを書くためのjs(今回の場合app.js)が必要です。

①公式サイトhttps://vincentgarreau.com/particles.js/にアクセスして、真ん中にでてくるDownloadボタンを押す

②particles.js-master.zipをデスクトップにおとしてきて、ファイルを右クリック→解凍する。

③解凍したparticles.js-master.zipファイルの中のparticles.jsと、demoの中のjsの中のapp.jsを自分のhtmlのjsフォルダーにコピーして設置します。
ファイルの場所に合わせてパスは変更すること。
HTML全体は下記のようになります。

HTML

  1. <!DOCTYPE html>
  2. <html lang="ja"> 
  3. <head>
  4. ～省略～
  5. </head>
  6. <body>
  7. <!-- Header -->
  8. <header>
  9. ～省略～
  10.     <!--particles-->
  11.     <script src="js/particles/particles.js"></script>
  12.     <script src="js/particles/app.js"/></script>
  13.     <!--/particles-->
  14. </header>
  15. <!-- /Header -->
  16. <!-- Main -->
  17. <main>
  18.     <!-- パーティクルを動かすエリア -->
  19.     <div class="wrap">
  20.         <div id="particles-js"></div>
  21.         <p>ダミーテキストダミーテキストダミーテキスト<br>
  22.         ダミーテキストダミーテキストダミーテキスト</p>
  23.     </div>
  24.     <!-- パーティクルを動かすエリアここまで -->
  25.     <div>
  26.         <p>下のコンテンツ</p>
  27.     </div>
  28. </main>
  29. <!-- /Main -->
  30. <!-- Footer -->
  31. <footer>
  32. ～省略～
  33. </footer>
  34. <!-- /Footer -->
  35. </body>
  36. </html>

アニメーションをつけたいラッパー要素の中に空の状態でidを指定して配置します。今回の場合「particles-js」というidで配置しています。

CSS

particles-jsがうまく読み込まれると、自動的にparticles-jsのタグの中にcanvasという図の描画用のタグが吐き出されます。(デバッカーで確認できます)

particle04.jpg
背景にするならCSSファイルにて、canvasがラッパー要素の中に納まるようにpositionプロパティで下記のような感じに設定します。

＊positionプロパティは、表示位置を指定するプロパティです。

  1. /*コンテンツを囲むラッパー要素*/
  2. .wrap{
  3. 	width:100%;
  4. 	height:700px;
  5. 	position:relative;/*基準要素、子の基準となる*/
  6. }
  7. /*アニメーション描画用*/
  8. canvas{
  9. 	position:absolute;/*親のブロックを基準にして相対位置に配置する*/
  10. 	/*位置指定*/
  11. 	top:0;
  12. 	right:0;
  13. 	z-index:-1;/*重ね順を-1に　※1以上だとほかのコンテンツの上に被さってしまいます*/
  14. }

この指定をしてあげることで.wrapに重なってくれるのでデモのようにテキストなどを上に乗せれます。

プロパティの指定

ここからはオプションの種類のお話になります。

各プロパティに説明を追加しているので、オプション用のjs(ここではapp.js)を開いて、下記をコピペしていろいろいじっていただければわかりやすいかもしれません。

詳細はさらに下の方で説明しますので是非最後までお読みください。

  1. window.addEventListener('load', function(){
  2.   //下記particles-js↓のところはHTMLで指定したidと合わせてください
  3. 	particlesJS('particles-js',{
  4. 		//パーティクルの設定
  5. 		"particles": {
  6. 			//シェイプの数
  7. 			"number": {
  8. 				"value": 20,//シェイプの数
  9. 				"density": {
  10. 					"enable": true,//密度を変更する
  11. 					"value_area": 1000//密集度
  12. 				}
  13. 			},
  14. 			//色
  15. 			"color": {
  16. 				"value": ["26B7BC","008FB3","FAF44B","5B98D2","4DE2D6"]
  17. 			},
  18. 			//シェイプの形状
  19. 			"shape": {
  20. 				"type": "circle",//シェイプの形(円)
  21. 				"stroke": {
  22. 					"width": 0,//外線つけない
  23. 					"color": "#000000"//つける場合の線色
  24. 					},
  25. 				//※typeがpolygon(多角形)の場合
  26. 				"polygon": {
  27. 					"nb_sides": 5//角の数
  28. 					},
  29. 				//typeがimageの場合
  30. 				"image": {
  31. 					"src": "img/gazou.png",//画像の指定
  32. 					"width": 100,//画像の幅
  33. 					"height": 100//画像の高さ
  34. 				}
  35. 			},
  36. 			//シェイプの透明度
  37. 			"opacity": {
  38. 				"value": 1,//透明度(1で不透明)
  39. 				"random": false,//透明度をランダムにしない
  40. 				//randomがtrueの場合
  41. 				"anim": {
  42. 					"enable": false,//透明度のアニメーションをしない
  43. 					"speed": 1,//アニメーションスピード
  44. 					"opacity_min": 0.1,//透明度の最小値
  45. 					"sync": false//各シェイプを同時に動かさない
  46. 				}
  47. 			},
  48. 			//シェイプの大きさ
  49. 			"size": {
  50. 				"value": 80,//大きさ
  51. 				"random": true,//大きさをランダムにする falseで均一
  52. 				"anim": {
  53. 					"enable": false,//シェイプの大きさをアニメーションしない
  54. 					"speed": 10,//アニメーションのスピード
  55. 					"size_min": 0.1,//サイズの最小値
  56. 					"sync": false//各シェイプを同時に動かさない
  57. 				}
  58. 			},
  59. 			//シェイプ間を結ぶ線
  60. 			"line_linked": {
  61. 				"enable_auto": false,//線をつけない
  62. 				"distance": 0,//繋がりの数
  63. 				"color": "#000",//線の色
  64. 				"opacity": 1,//透明度　1で不透明
  65. 				"width": 1//線の太さ
  66. 			},
  67. 			//シェイプの動き
  68. 			"move": {
  69. 				"enable": true,//動きを付ける
  70. 				"speed": 2,//シェイプが動くスピード数値が大きいと早い
  71. 				"direction": "none",//動きの方向(none、top、top-right、right、bottom-right、bottom、bottom-left、left、top-left)
  72. 				"straight": false,//動きを動きを止めるか否か
  73. 				"out_mode": "bounce",//外枠に達した際のシェイプの動き　bounce→跳ね返る　out→フレームアウト
  74. 				/*シェイプを引き寄せる*/
  75. 				"attract": {
  76. 					"enable": false,//引き寄せない
  77. 					"rotateX": 600,//横軸の指定
  78. 					"rotateY": 1200//横軸の指定
  79. 				}
  80. 			}
  81. 		},
  82. 		//相互作用
  83. 		"interactivity": {
  84. 			"detect_on": "canvas",
  85. 			"events": {
  86. 				//カーソルを乗せた時の動き
  87. 				"onhover": {
  88. 					"enable": false,//無効
  89. 					"mode": "repulse"//enableがtrueの場合の動き(下の★のリストの名前入れるとその動きが発動)
  90. 				},
  91. 				//クリックしたときの動き
  92. 				"onclick": {
  93. 					"enable": false,//無効
  94. 					"mode": "push"//(下の★のリストの名前入れるとその動きが発動)
  95. 				},
  96. 				"resize":true//リサイズしたとき拡縮しない
  97. 			},
  98. 			//各モード設定した場合の動き
  99. 			"modes": {
  100. 				//★シェイプとカーソルの間に線ができる
  101. 				"grab": {
  102. 					"distance": 400,//カーソルからの反応距離
  103. 					"line_linked": {
  104. 					"opacity": 1//線の不当明度
  105. 					}
  106. 				},
  107. 				//★シェイプが膨らむ
  108. 				"bubble": {
  109. 					"distance": 200,//カーソルからの反応距離
  110. 					"size": 40,//膨らむ際の大きさ
  111. 					"duration": 2,//持続時間
  112. 					"opacity": 8,//透明度
  113. 					"speed": 3//速度
  114. 					},
  115. 				//★シェイプに触れるとカーソルから逃げる
  116. 				"repulse": {
  117. 					"distance": 200//カーソルからの反応距離
  118. 					},
  119. 				//★シェイプを増やす
  120. 				"push": {
  121. 					"particles_nb": 4//数
  122. 					},
  123. 				//★シェイプを減らす
  124. 				"remove": {
  125. 					"particles_nb": 2//数
  126. 				}
  127. 			}
  128. 		},
  129. 			"retina_detect": true,//Retina Display(*高画素密度のディスプレイ)を対応する
  130. 		}
  131. 	); 
  132. });

2022/06/23 修正

head内で読み込みをするwindow.addEventListener('load', function(){～});を追加しました。
DOMと関連データを読み込み後にオプションjsが読み込まれるようになるため bodyの閉じタグ前に入れずに動作します。※画面リサイズ時にレイアウト崩れがあったため読み込み方を変更しました

jQueryを使用している場合は下記の記事の「はじめに」の部分をご参考ください。

jQueryについて

---------------------------------------------------------

＊enable値はtrueで有効(使用する)にする、falseで無効(使用しない)となります。

シェイプの数の部分の指定

  1. //数
  2. "number": {
  3. 	"value": 20,//シェイプの数
  4. 	"density": {
  5. 		"enable": true,//密集度を変更する
  6. 		"value_area": 1000//密集度
  7. 	}
  8. }

シェイプの数を指定します。
valueで数を指定し、densityのenableがfalse(無効)の場合は指定した数の分だけ生成されます。
trueの場合は密集度を変更でき、value_areaの数値が大きければ余白が大きく取れ、小さいほど余白がなくなるようです。

色の部分の指定

  1. //シェイプの色
  2. "color": {
  3. 	"value": ["26B7BC","008FB3","FAF44B","5B98D2","4DE2D6"]
  4. }

色を指定します。複数の色を生成したい場合は上記のようにカラーをvalueに配列で指定できます。(カンマ区切り)

シェイプの形状の指定

  1. //シェイプの形状
  2. "shape": {
  3. 	"type": "circle",//シェイプの形(円)
  4. 	"stroke": {
  5. 		"width": 0,//外線つけない
  6. 		"color": "#000000"//つける場合の線色
  7. 		},
  8. 	//※typeがpolygon(多角形)の場合
  9. 	"polygon": {
  10. 		"nb_sides": 5//角の数
  11. 		},
  12. 	//typeがimageの場合
  13. 	"image": {
  14. 		"src": "img/gazou.png",//画像の指定
  15. 		"width": 100,//画像の幅
  16. 		"height": 100//画像の高さ
  17. 	}
  18. }

typeでシェイプの形状を指定できます。

設定できるtypeの種類は以下の通り

circle
円
edge
四角形
triangle
三角形
polygon
多角形
star
星
image
画像指定

typeでpolygonを選んだ場合、角の数を指定できます。

  1. //※typeがpolygon(多角形)の場合
  2. "polygon": {
  3. 	"nb_sides": 5//角の数
  4. }

typeでimageを選んだ場合、角の数を指定できます。

  1. //typeがimageの場合
  2. "image": {
  3. 	"src": "img/gazou.png",//画像の指定
  4. 	"width": 100,//画像の幅
  5. 	"height": 100//画像の高さ
  6. }

シェイプの透明度の指定

  1. //シェイプの透明度
  2. "opacity": {
  3. 	"value": 1,//透明度(1で不透明)
  4. 	"random": false,//透明度をランダムにしない
  5. 	//randomがtrueの場合
  6. 	"anim": {
  7. 		"enable": false,//透明度のアニメーションをしない
  8. 		"speed": 1,//アニメーションスピード
  9. 		"opacity_min": 0.1,//透明度の最小値
  10. 		"sync": false//各シェイプを同時に動かさない
  11. 	}
  12. }

valueで透明度を指定できます。0.1～1の間で指定し、1で不透明。

randomがtrueの場合、各シェイプの透明度がランダムになります

また、アニメーションが指定できるようになり、enableをtrueにすると透明度が移り変わるアニメーションがつきます。
speedの値が高いほど早く動きます。

opacity_minで透明度の最小値を設定可能

syncがtrueの場合、アニメーションが同時に動作します。falseでバラバラに動作

シェイプの大きさの指定

  1. //シェイプの大きさ
  2. "size": {
  3. 	"value": 80,//大きさ
  4. 	"random": true,//大きさをランダムにする falseで均一
  5. 	"anim": {
  6. 		"enable": false,//シェイプの大きさをアニメーションしない
  7. 		"speed": 10,//アニメーションのスピード
  8. 		"size_min": 0.1,//サイズの最小値
  9. 		"sync": false//各シェイプを同時に動かさない
  10. 	}
  11. }

valueで大きさを指定できます。

randomがtrueの場合、各シェイプの大きさがランダムになります。falseで均一に設定されます。

ランダムの場合animでアニメーションが指定ができます。

enableがtrueの場合、シェイプの大きさが変化するアニメーションがつきます

speedの値が高いほど早く動きます。

syncがtrueの場合、アニメーションが同時に動作します。falseでバラバラに動作

シェイプ間を結ぶ線の指定

  1. //シェイプ間を結ぶ線
  2. "line_linked": {
  3. 	"enable_auto": false,//線をつけない
  4. 	"distance":0,//繋がりの数
  5. 	"color": "#000",//線の色
  6. 	"opacity": 1,//透明度　1で不透明
  7. 	"width": 1//線の太さ
  8. }

enable_autoで線の表示の有無を設定できます。

distanceでは数値が高いほどシェイプ間を結ぶ線が増えます。

colorでは、線の色が指定できます。

opacityでは、線の透明度を指定できます。

widthでは、線の太さを指定できます。

シェイプの動きの指定

  1. //シェイプの動き
  2. "move": {
  3. 	"enable": true,//動きを付ける
  4. 	"speed": 2,//シェイプが動くスピード数値が大きいと早い
  5. 	"direction": "none",//動きの方向(none、top、top-right、right、bottom-right、bottom、bottom-left、left、top-left)
  6. 	"straight": false,//動きを止めるか否か
  7. 	"out_mode": "bounce"//外枠に達した際のシェイプの動き　bounce→跳ね返る　out→フレームアウト
  8. 	/*シェイプを引き寄せる*/
  9. 	"attract": {
  10. 		"enable": false,//引き寄せない
  11. 		"rotateX": 600,//横軸の指定
  12. 		"rotateY": 1200//縦軸の指定
  13. }

enableで動きの設定を付けるか否かの指定ができます。

speedでシェイプが動くスピードを指定できます。数値が大きいほど早くなります。

directionでは動きの方向を指定できます。

directionで指定できるプロパティの種類は下記のようになります

none
特に方向を決めない
top
上昇
top-right
右に上昇
right
右へ
bottom-right
右へ降下
bottom
降下
bottom-left
左へ降下
left
左へ
top-left
左へ上昇

attractはenableがtrueの場合、シェイプを引き寄せます？検証の必要あり
rotateXで横軸、rotateYで縦軸を指定します。
デモプレイでみてもピンとこなかったので数が多くない場合は必要がないかもしれません

straightはtrueでシェイプの動きがとまります。
＊enable:falseとの違いは、後述のホバー、クリックイベント(onhover,onclick)の動作までは止まらないという点です。
enable:falseではイベントの動作も効きません。

out_modeでは、シェイプが外枠に達した際の動作が指定できます。

bounce
外枠に達した際跳ね返ります
out
外枠に達した際、フレームアウトします

イベントの指定

ユーザーがカーソルで操作を行う際に発生させるイベントを指定できます。

  1. "events": {
  2. 	//カーソルを乗せた時の動き
  3. 	"onhover": {
  4. 		"enable": false,//無効
  5. 		"mode": "repulse"//enableがtrueの場合の動き(下の★のリストの名前入れるとその動きが発動)
  6. 	},
  7. 	//クリックしたときの動き
  8. 	"onclick": {
  9. 		"enable": false,//無効
  10. 		"mode": "push"//(下の★のリストの名前入れるとその動きが発動)
  11. 	}
  12. 	"resize":true//リサイズしたとき拡縮しない
  13. 	}
  14. }

onhoverは、マウス乗せた時の動きを指定します。

onclickは、クリックしたときの動きを指定します。

resizeは画面に合わせて拡縮するか、しないかを指定します。
falseで拡縮、trueで拡縮されずはみ出したアイテムははじかれます

enableでイベントの有効、無効を指定できます。

enableがtrueの場合、mode(発生する動き)を下記の中から指定、実装が可能です。

  1. //各モード設定した場合の動き
  2. "modes": {
  3. 	//★シェイプとカーソルの間に線ができる
  4. 	"grab": {
  5. 		"distance": 400,//カーソルからの反応距離
  6. 		"line_linked": {
  7. 		"opacity": 1//線の不当明度
  8. 		}
  9. 	},
  10. 	//★シェイプが膨らむ
  11. 	"bubble": {
  12. 		"distance": 200,//カーソルからの反応距離
  13. 		"size": 40,//膨らむ際の大きさ
  14. 		"duration": 2,//持続時間
  15. 		"opacity": 8,//透明度
  16. 		"speed": 3//速度
  17. 		},
  18. 	//★シェイプに触れるとカーソルから逃げる
  19. 	"repulse": {
  20. 		"distance": 200//カーソルからの反応距離
  21. 		},
  22. 	//★シェイプを増やす
  23. 	"push": {
  24. 		"particles_nb": 4//数
  25. 		},
  26. 	//★シェイプを減らす
  27. 	"remove": {
  28. 		"particles_nb": 2//数
  29. 	}
  30. }

高画素密度のディスプレイ対応

  1. "retina_detect": true,//Retina Display(*高画素密度のディスプレイ)を対応する

trueで高解像度、ハイコントラストなディスプレイに対応します。

私もまだ全部の動作の理解まではいっていないのですが、試してみた限りの説明を加えてみました。

公式サイトでは実際にオプションがいろいろいじれるので是非そちらで一度お試しください～

関連記事