夏のWebデザインにぴったり！CSS＋JavaScriptで作る花火エフェクトの実装方法

4月 4, 2025 5月 16, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

夏といえば、花火大会、縁日、夏祭り…。
Webサイトでも、そんな季節感を演出できたら訪れた人の印象もグッと良くなりますよね。
今回は、CSSとJavaScriptを使って夜空に花火が打ち上がるようなアニメーションを実装する方法をご紹介します。

コピペで使えるコードも用意しているので、花火大会の告知サイトやイベントLPにぜひ活用してみてください！

完成イメージ

下記のコードを使えば、夜空にカラフルな火花がシュッと打ち上がってパッと弾けるようなアニメーションが再現できます。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

実装コード

HTML

<canvas id="fireworks"></canvas>

CSS

body {
  margin: 0;
  background: #000;
  overflow: hidden;
}
canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

JavaScript

const canvas = document.getElementById("fireworks");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function random(min, max) {
  return Math.random() * (max - min) + min;
}
let particles = [];
function createFirework() {
  const count = 100;
  const x = random(100, canvas.width - 100);
  const y = random(100, canvas.height / 2);
  const color = `hsl(${Math.floor(random(0, 360))}, 100%, 60%)`;
  for (let i = 0; i < count; i++) {
    particles.push({ x: x, y: y, vx: random(-5, 5), vy: random(-5, 5), alpha: 1, color: color });
  }
}
function updateParticles() {
  ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  particles.forEach((p, i) => {
    p.x += p.vx;
    p.y += p.vy;
    p.alpha -= 0.01;
    ctx.beginPath();
    ctx.arc(p.x, p.y, 2, 0, Math.PI * 2);
    ctx.fillStyle = p.color;
    ctx.globalAlpha = p.alpha;
    ctx.fill();
    if (p.alpha <= 0) {
      particles.splice(i, 1);
    }
  });
  ctx.globalAlpha = 1;
}
function animate() {
  requestAnimationFrame(animate);
  updateParticles();
  if (Math.random() < 0.05) {
    createFirework();
  }
}
animate();