particles.jsを使用したランタン祭り再現

Visual / Effects

実装ポイント Focus: フルスクリーンのランタン写真をフェードインしたあと、オレンジの円形パーティクルを重ね、画像をぼかして光の粒が画面を満たしていくイントロ演出です。
パーティクルは上方向へゆっくり浮遊し、一定時間後に段階的に増えていきます。クリックで粒を追加できます。
挑戦 Challenge: particles.js は初期個数を一気に出すと賑やかすぎるため開始時は密度を抑え、0.5秒ごとに5個ずつ追加し上限150で止める staged spawn にしました。
あわせてサイズアニメの速度を落とし最小サイズを底上げすることで、粒が消えたりチカチカしたりしないよう調整しています。
クリックでは push を有効にし、ホバーの散開は切って、静かな上昇を壊さないようにしています。
使用技術 Animation: ・HTML5
・SCSS / CSS3
・JavaScript + particles.js
詳細 Details: #particles.js #timed-sequence