Javascript code hiệu ứng pháo hoa cho blogspot [Update 2025]

Update code mới không gây giật lag, trong bài viết này, chúng ta sẽ tìm hiểu Cách thêm hiệu ứng pháo hoa năm mới bằng Javascript vào trang web Blogger.

Javascript code hiệu ứng pháo hoa cho blogspot.

Thật ra là Javascript code hiệu ứng pháo hoa này chủ yếu để cho có không khí mùa xuân tí thôi chứ cũng chả ai xài nhiều. Ngày xưa thì phổ biến nhưng Blogspot bây giờ người ta ưa chuộng đơn giản, tối ưu hóa hơn là màu mè. Nhưng mà thôi úp bài cũ cho vui vậy!

Gợi ý: Tạo hiệu ứng tuyết rơi bằng CSS3 cho blogspot hoàn toàn không gây giật lag

Code hiệu ứng pháo hoa cho blogspot

Để thực hiện tạo một hiệu ứng này cho blogspot thì hết sức dễ dàng. Các bạn làm như sau:

Chèn trực tiếp code dưới đây lên trước thẻ đóng </body>:

<!-- Fireworks Effect Start -->
<canvas id="fireworksCanvas"></canvas>
<button id="toggleFireworks">🎆 Tắt pháo hoa</button>

<script>
(function(){
  const canvas=document.getElementById('fireworksCanvas'),
        ctx=canvas.getContext('2d'),
        toggleBtn=document.getElementById('toggleFireworks');
  let W,H,fireworks=[],running=true,interval;

  function resize(){W=canvas.width=window.innerWidth;H=canvas.height=window.innerHeight;}
  window.addEventListener('resize',resize);resize();

  // âm thanh bụp bụp (play khi click)
  function playBoom(){
    if(!running) return;
    const audio=new Audio("https://cdn.pixabay.com/download/audio/2022/03/15/audio_3d2b5abce3.mp3?filename=small-explosion-6813.mp3");
    audio.volume=0.4;
    audio.play().catch(()=>{});
  }

  class Firework{
    constructor(x,y){
      this.particles=[];
      for(let i=0;i<30;i++){
        const angle=Math.random()*2*Math.PI,
              speed=Math.random()*3+2;
        this.particles.push({
          x:x,y:y,
          vx:Math.cos(angle)*speed,
          vy:Math.sin(angle)*speed,
          alpha:1,
          color:`hsl(${~~(Math.random()*360)},100%,60%)`
        });
      }
    }
    update(){
      this.particles.forEach(p=>{
        p.x+=p.vx;
        p.y+=p.vy;
        p.vy+=0.05;
        p.alpha-=0.01;
      });
      this.particles=this.particles.filter(p=>p.alpha>0);
    }
    draw(){
      this.particles.forEach(p=>{
        ctx.globalAlpha=p.alpha;
        ctx.fillStyle=p.color;
        ctx.beginPath();
        ctx.arc(p.x,p.y,2,0,2*Math.PI);
        ctx.fill();
      });
    }
  }

  function loop(){
    if(!running) return;
    ctx.clearRect(0,0,W,H);
    fireworks.forEach(f=>{f.update();f.draw();});
    fireworks=fireworks.filter(f=>f.particles.length>0);
    requestAnimationFrame(loop);
  }

  function startFireworks(){
    if(running) return;
    running=true;
    loop();
    interval=setInterval(()=>{
      fireworks.push(new Firework(Math.random()*W,Math.random()*H*0.6));
    },800);
    toggleBtn.textContent="🎆 Tắt pháo hoa";
  }

  function stopFireworks(){
    running=false;
    clearInterval(interval);
    ctx.clearRect(0,0,W,H);
    fireworks=[];
    toggleBtn.textContent="🎇 Bật pháo hoa";
  }

  toggleBtn.addEventListener('click',()=>{
    running ? stopFireworks() : startFireworks();
  });

  canvas.addEventListener('click',e=>{
    if(running){
      fireworks.push(new Firework(e.clientX,e.clientY));
      playBoom();
    }
  });

  // auto nổ ngẫu nhiên ban đầu
  interval=setInterval(()=>{
    fireworks.push(new Firework(Math.random()*W,Math.random()*H*0.6));
  },800);
  loop();
})();
</script>

<style>
#fireworksCanvas {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:9998;
  pointer-events:none; /* không che click nội dung */
}
#toggleFireworks {
  position:fixed;
  bottom:15px;
  left:15px; /* góc trái dưới */
  z-index:9999;
  padding:8px 14px;
  font-size:14px;
  border:none;
  border-radius:6px;
  background:#ff5722;
  color:#fff;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
#toggleFireworks:hover {
  background:#e64a19;
}
</style>
<!-- Fireworks Effect End -->

Hoặc có thể tạo một widget Javascript/HTML ở bố cục và chèn nó vào (không cần mã hóa code). Sở dĩ làm như vậy để giảm tải độ nặng khi sử dụng nhiều Js, hạn chế ảnh hưởng đến SEO.

Còn muốn nó hiển thị pháo hoa ở đâu trên Blog của mình thì áp dụng các thẻ điều kiện này vào nha!

Nâng cao

Ở đây mình sẽ để một ví dụ về hiệu ứng pháo hoa chuyên sâu có cả âm thanh rất sống động để tham khảo, chưa đưa vào Bloggể thế nào thì mình cũng chưa biết :v

See the Pen Firework Simulator v2 by Caleb Miller (@MillerTime) on CodePen.

Anh em nào làm được pháo hoa có âm thanh như demo trên thì cho cái tips hướng dẫn nha, cảm ơn anh em đã ghé xem!