ReactでSnow Particles背景アニメーションを作る方法
概要
Snow Particles は、Canvas上に複数の粒子を描画し、 それぞれの位置・速度・サイズ・透明度を個別に管理することで、 雪がゆっくり降り続けるような背景アニメーションを表現しています。
粒子はランダムな位置や速度で生成され、 画面の下端まで到達すると上部へ再配置されます。 そのため、一定数の粒子を繰り返し利用しながら、 雪が継続的に降っているような動きを作ることができます。
Heroセクションやランディングページの背景、 冬をテーマにしたWebサイトなどのアクセントとして利用できます。
また、粒子の色やサイズ、速度などを変更することで、 雪だけでなく星空や光の粒子など、異なる表現にも応用できます。
- Canvas描画
- ランダム生成
- 落下アニメーション
- 透明度変化
- ループ再配置
実装のポイント
Snow Particlesでは、雪を1つの大きな画像として表示するのではなく、 複数の粒子として管理しています。 各粒子には位置・速度・サイズ・透明度などの値を持たせ、 フレームごとに位置を更新してCanvasへ描画しています。
- Canvas上に複数の粒子を描画
- 粒子ごとに位置・速度・サイズ・透明度を設定
- ランダムな値を使って粒子ごとの差を作る
- 画面外へ出た粒子を上部へ再配置
- 透明度を変化させて雪の明るさにばらつきを加える
この実装にした理由
雪のような粒子を多数表示する場合、 1つ1つをHTML要素として管理する方法では、 粒子数が増えたときにDOM上で管理する要素も増えていきます。
この実装では、粒子を個別のHTML要素として配置するのではなく、 Canvasの描画領域内でまとめて管理しています。 粒子の位置や速度などをJavaScriptで更新し、 Canvasへ再描画することで、継続的に雪が降るアニメーションを作っています。
また、粒子ごとに速度やサイズをランダムに変えることで、 すべての雪が同じ動きをする不自然さを避けています。
コード
カスタマイズ
見出しの下に変更箇所のコードを載せています。
粒子数
生成する粒子の数を変更すると、画面上に表示される雪の密度を調整できます。
const numStars = 150;- 数値を大きくする → 雪の密度が高くなる
- 数値を小さくする → 雪の密度が低くなる
const numStars = 150;落下速度変更
speed の値を大きくすると粒子が速く落ち、 小さくするとゆっくり落ちます。 Math.random()によって粒子ごとに速度を変えることで、 すべての粒子が同じタイミングで落ちるのを避けています。
- 値を大きくする → 雪が速く落ちる
- 値を小さくする → 雪がゆっくり落ちる
speed: Math.random() * 0.5 + 0.1,粒子サイズ
size は、Canvasに描画する粒子の大きさを決めています。 Math.random()を使用しているため、粒子ごとにサイズが少しずつ変わります。
size: Math.random() * 2 + 0.5,- 値を大きくする → 大きな雪が増える
- 値を小さくする → 細かい雪が増える
透明度
opacity は粒子の透明度を決めています。 値の範囲を調整することで、雪を薄くしたり、明るくしたりできます。
opacity: Math.random() * 0.5 + 0.5,- 値を大きくする → 明るく見える
- 値を小さくする → 薄く見える
粒子の明るさの揺らぎ
粒子のopacityを時間によって変化させることで、 雪の粒が一定の明るさで表示され続けるのではなく、 少しずつ明るさが変化するようにしています。
star.opacity = 0.5 + Math.sin(Date.now() * 0.002 + star.x) * 0.3;0.002 の値を変更すると、明るさが変化する速度を調整できます。
色変更
ctx.fillStyle = `rgba(255,255,255,${star.opacity})`;青系
ctx.fillStyle = `rgba(120,180,255,${star.opacity})`;金色
ctx.fillStyle = `rgba(255,220,120,${star.opacity})`;色を変更することで、雪だけでなく星空や光の粒子など、 サイトのテーマに合わせた表現へ変更できます。
粒子の再配置
粒子がCanvasの下端を超えたかどうかを判定し、 画面外へ出た粒子を上部へ再配置しています。
if (star.y > canvas.offsetHeight)再配置する位置を変更すると、粒子が画面内へ現れるタイミングを調整できます。
star.y = -20;パフォーマンスについて
Snow Particlesでは、一定間隔でCanvasを再描画しながら 複数の粒子の位置や透明度を更新しています。 粒子数を増やすほど、1フレームあたりに処理する量も増えます。
背景として使用する場合は、必要以上に粒子数を増やさず、 実際の端末でスクロールやページ操作への影響がないか確認することをおすすめします。
アクセシビリティについて
背景アニメーションは、ユーザーによっては動きが負担になる場合があります。 実際のWebサイトで使用する場合は、prefers-reduced-motion を考慮し、 アニメーションを停止または弱められるようにすることをおすすめします。
実際に使うなら
Snow Particlesは、冬らしい季節感や静かな雰囲気を背景に加えたい場合に向いています。 また、粒子の色やサイズ、速度を変更することで、雪以外の表現にも応用できます。
- 冬をテーマにしたWebサイト
- クリスマスや季節イベントのページ
- Heroセクションの背景
- ポートフォリオサイトの背景演出
- 星空や光粒子を使った背景