Webサイトやアプリケーションに視覚的な魅力を加えるため、動的で美しい粒子エフェクトは効果的です。particles.js は軽量かつ柔軟なライブラリで、カスタマイズ可能な粒子アニメーションを簡単に実装できます。
基本的な導入方法
まず、HTML内に描画用のコンテナを設置し、particles.js のスクリプトを読み込みます：
<div id="particle-container"></div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>次に、JavaScript で設定をロードします。JSON形式の設定ファイルを使用するのが一般的です：
particlesJS.load('particle-container', 'config/particle-settings.json', function() {
console.log('粒子アニメーションの設定が正常に読み込まれました');
});以下は最小限のHTMLテンプレート例です：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>粒子アニメーション</title>
<style>
#particle-container {
width: 100%;
height: 100vh;
background: #000;
}
</style>
</head>
<body>
<div id="particle-container"></div>
<script src="particles.min.js"></script>
<script src="init-particles.js"></script>
</body>
</html>主な設定パラメータ
| プロパティ | 説明 | 例 |
|---|---|---|
particles.number.value | 画面上の粒子数 | 50 |
particles.color.value | 粒子の色（HEX, RGB, HSL, 配列, "random"） | "#ff5733", {r:255, g:87, b:51} |
particles.shape.type | 形状（円、三角、星、画像など） | "circle", ["circle", "star"] |
particles.opacity.anim.enable | 透明度アニメーションの有効化 | true |
particles.size.value | 粒子のサイズ | 3.5 |
particles.line_linked.enable | 粒子間の線の表示 | true |
particles.move.speed | 移動速度 | 2.5 |
interactivity.events.onhover.mode | マウスホバー時の挙動（grab, bubble, repulse） | "repulse" |
interactivity.events.onclick.mode | クリック時の挙動 | "push" |
retina_detect | Retinaディスプレイ対応 | true |
設定ファイル（particle-settings.json）では、上記のようなパラメータを自由に組み合わせて、独自のビジュアルエフェクトを作成できます。たとえば、ダークテーマに青白い粒子と引力効果を追加すれば、SF映画のような雰囲気を演出可能です。