particles.jsを使って紙吹雪を降らせたい

今回はHTML＋CSS＋JavaScript（Particles.js）を使い、画面全体に華やかな紙吹雪（コンフェッティ）を落とす方法を、新人エンジニアでもわかるようステップバイステップで解説します。

概要

ウェブページに動きのあるビジュアルを加えると、ユーザー体験を向上させやすいです。今回のサンプルでは、Particles.jsというライブラリを利用し、画面全体に色とりどりの丸い紙吹雪をランダムに浮遊・落下させています。

HTMLでライブラリ読み込みと要素配置
CSSで表示領域（キャンバス）のスタイル調整
JavaScriptで粒子（パーティクル）設定

と、大きく3つのステップに分かれます。

HTMLの構造

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>紙吹雪エフェクト</title>
  <!-- CSSはこの内部に書くか、外部ファイルを読み込む -->
  <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</head>
<body>
  <!-- パーティクル用のキャンバスを置く -->
  <div id="particles-js"></div>
  <!-- 後述の設定を実行する -->
  <script>/* 設定コード */</script>
</body>
</html>

<script src="…"></script>：Particles.js本体をCDN経由で読み込むタグ。
<div id="particles-js">：この要素内にキャンバスが生成され、粒子が描画される。

CSSの設定

body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: 0;
  left: 0;
}

余白・スクロールバーを排除し、画面いっぱいにエフェクトを広げる。
position: fixed で画面スクロールしても背景に固定。
z-index: -1 で他の要素より背面に配置。

JavaScriptでのParticles.js設定

パーティクル設定の全体像

particlesJS("particles-js", {
  particles: { /* 粒子個別設定 */ },
  interactivity: { /* ユーザー操作時の挙動 */ },
  retina_detect: true
});

パラメータ概要を表にまとめます。

プロパティ	説明	例
`particles.number`	粒子の総数	`value: 1000`
`particles.color`	配置する色の配列	`["#FF0000", "#00FF00", …]`
`particles.shape`	形状	`"circle"`
`particles.opacity`	不透明度（0〜1）、`random:true`でランダム	`value:0.8`
`particles.size`	大きさ（px）、`random:true`でランダム	`value:8`
`particles.move`	移動方向・速度・画面外挙動	`direction:"bottom"`
`interactivity.events`	ホバー/クリック時挙動（今回はOFF）	`resize:true`

`particles.number` の詳細

value：希望する粒子数。数が多いほど重くなる。
density.enable：trueにすると、画面サイズに応じて自動補正。
value_area：粒子数補正の基準面積。

`particles.color` と `particles.shape`

color.value：配列指定で複数色をランダムに選択。
shape.type: "circle","edge","triangle"など。丸型は紙吹雪で親しみやすい。

`particles.opacity` と `particles.size`

value：最大不透明度・サイズ
random: true：0〜指定値の間でばらつきを与える
α_rand = ランダム(0, 最大不透明度)

ランダム効果は、舞い散る紙吹雪らしさを表現。

`particles.move` のポイント

move: {
  direction: "bottom",
  speed: 10,
  out_mode: "out"
}

direction：落下方向（例："bottom"は下方向）
speed：落下速度
out_mode：画面外に出た粒子を削除 or ループ

相互作用（`interactivity`）

interactivity: {
  detect_on: "canvas",
  events: { onhover:{enable:false}, onclick:{enable:false}, resize:true }
}

ユーザー操作への反応を制御。今回は全オフだが、後からホバー時の反応などを追加可能。

Retina対応

retina_detect: true

デバイスピクセル比を検出し、高解像度表示に最適化。

[図1] 粒子サイズ分布（例）

上記コードで size.value = 8, random=true とした場合、サイズは 0〜8 の一様分布となります。先ほど示したヒストグラムでランダムな分布を可視化しました。

まとめと今後の学習指針

今回の解説で、HTML・CSS・JavaScript（Particles.js）を用いた紙吹雪エフェクトの基本構成が理解できたと思います。徐々にパラメータを変更し、次のステップに挑戦しましょう：

interactivity を有効化し、ホバーやクリックで粒子を弾ませてみる。
shape.type を "triangle" やカスタム画像に変えて、多様なエフェクトを試す。
アニメーションフレームレートや fps_limit を指定し、パフォーマンス最適化を探る。

これらを実践し、視覚表現の幅を広げてみてくださいね！

Webアプリケーション制作のための小ネタ集　目次に戻る

最後までお読みいただきありがとうございます。

研修のカリキュラムを見てみる

概要