Hiệu ứng pháo hoa với HTML, CSS Animation và JavaScript

Bài này đi thẳng vào thực chiến: giải thích ngắn gọn + code chạy được ngay. Demo xem ngay tại bài viết nhé!

Ý tưởng hoạt động của hiệu ứng pháo hoa

Hiệu ứng được xây dựng dựa trên 3 lớp:

• HTML: Chỉ là container để chứa pháo hoa.
• CSS Animation: Điều khiển chuyển động bay lên, nổ và tàn.
• JavaScript: Tạo pháo hoa ngẫu nhiên theo thời gian và vị trí.

Mỗi lần bắn là một cụm hạt nhỏ (particle), bay ra từ một điểm trung tâm với góc và tốc độ khác nhau.

Cấu trúc HTML đơn giản

<div id="fireworks"></div>

Chỉ cần một div gốc. Mọi particle sẽ được JavaScript bơm vào đây.

CSS animation cho pháo hoa

#fireworks {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

.firework {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: explode 1.2s ease-out forwards;
}

@keyframes explode {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--x), var(--y)) scale(0.2);
    opacity: 0;
  }
}

Điểm hay ở đây là sử dụng CSS variable --x và --y để mỗi hạt bay theo hướng khác nhau.

JavaScript tạo pháo hoa ngẫu nhiên

const container = document.getElementById('fireworks');

function createFirework(x, y) {
  const particles = 30;

  for (let i = 0; i < particles; i++) {
    const particle = document.createElement('div');
    particle.className = 'firework';

    const angle = Math.random() * Math.PI * 2;
    const distance = Math.random() * 120 + 30;

    const offsetX = Math.cos(angle) * distance;
    const offsetY = Math.sin(angle) * distance;

    particle.style.left = x + 'px';
    particle.style.top = y + 'px';
    particle.style.setProperty('--x', offsetX + 'px');
    particle.style.setProperty('--y', offsetY + 'px');
    particle.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 60%)`;

    container.appendChild(particle);

    particle.addEventListener('animationend', () => {
      particle.remove();
    });
  }
}

setInterval(() => {
  const x = Math.random() * window.innerWidth;
  const y = Math.random() * window.innerHeight * 0.6;
  createFirework(x, y);
}, 800);

Đoạn code trên sẽ tự động bắn pháo hoa ngẫu nhiên trên màn hình mỗi 800ms.

Ưu điểm của cách làm này

• Không dùng canvas, dễ chỉnh sửa.
• Nhẹ, không phụ thuộc thư viện ngoài.
• Chạy mượt trên hầu hết trình duyệt hiện đại.
• Dễ tích hợp vào landing page, popup, hoặc trang chúc mừng.

Cách tối ưu hiệu ứng

• Giảm số lượng particle nếu chạy trên mobile.
• Tăng thời gian interval để tránh tốn CPU.
• Chỉ kích hoạt pháo hoa khi có sự kiện: click, submit form, countdown kết thúc.

Khi nào nên dùng hiệu ứng pháo hoa

Pháo hoa rất hợp cho các tình huống mang tính cảm xúc hoặc kỷ niệm như:

• Trang chúc mừng năm mới.
• Hoàn thành đơn hàng, đăng ký thành công.
• Ra mắt sản phẩm hoặc milestone quan trọng.

Dùng đúng chỗ thì “wow”, dùng sai chỗ thì thành spam. Cứ nhớ nguyên tắc đó là ổn.

Kết luận

Chỉ với HTML, CSS Animation và một ít JavaScript, bạn đã có hiệu ứng bắn pháo hoa đẹp, gọn và dễ kiểm soát. Không cần thư viện nặng, không cần canvas phức tạp, vẫn đủ để gây ấn tượng mạnh cho người xem.

Copy code, dán vào project, chỉnh thông số một chút là chơi được ngay.