Dịp Tết là thời điểm lý tưởng để trang trí website của bạn với các hiệu ứng Code pháo hoa trang trí đẹp mắt và sống động nhằm mang đến không khí lễ hội. Một trong những hiệu ứng phổ biến và ấn tượng là bắn pháo hoa. Với hiệu ứng này, website của bạn không chỉ thu hút sự chú ý của người xem mà còn tạo cảm giác vui vẻ, hứng khởi.

Tham gia kênh Telegram của AnonyViet 👉 Link 👈

Các bài viết liên quan

Code bắn pháo hoa mang lại nhiều lợi ích và rất dễ áp dụng. Hiệu ứng này cho phép hiển thị các tia pháo hoa rực rỡ trên toàn màn hình, xuất hiện khi người dùng nhấp chuột hoặc tự động bắn sau mỗi vài giây. Đặc biệt, bạn có thể tùy chỉnh màu sắc, kích thước và tần suất pháo hoa để phù hợp với thiết kế tổng thể của website.

Ứng dụng của code pháo hoa rất đa dạng. Bạn có thể sử dụng nó để tạo điểm nhấn cho các chương trình khuyến mãi Tết trên website thương mại điện tử, làm đẹp blog cá nhân theo chủ đề năm mới, hoặc trang trí trang giới thiệu sự kiện và chiến dịch quảng bá lễ hội. Code được viết bằng JavaScript kết hợp với HTML và CSS, đảm bảo nhẹ nhàng, không ảnh hưởng đến tốc độ tải trang, và tương thích tốt trên hầu hết các trình duyệt hiện đại.

Xem thêm: Hướng dẫn hủy tất cả lời mời kết bạn đã gửi trên Facebook

Ngoài ra bạn có thể tham khảo code pháo hoa di theo chuột ở bài viết trước

Code pháo hoa trang trí Website

Trước khi quyết định có dùng code hay không, bạn có thể xem Demo pháo hóa tại trang này: https://anonyviet.com/resource/phaohoa/demo.html

Đây là code gốc được tham khảo từ website: https://quaqueviet.nguyenlan.io.vn/phaohoa.txt

Code pháo hoa tết cho WordPress

Mở file functions.php trong thư mục theme của WordPress và copy toàn bộ code dưới đây dán vào ở cuối file functions.php (thường ở đường dẫn wp-content/themes/tên-theme/functions.php)

function chenphaohoa(){

<?php

}

add_action('wp_footer','chenphaohoa');

function chenphaohoa(){ ?> <link rel="stylesheet" href="https://anonyviet.com/resource/phaohoa/fireworks1.css"> <script src="https://anonyviet.com/resource/phaohoa/fireworks1.js"></script> <canvas id="fireworks" style="display:none;"></canvas> <?php } add_action('wp_footer','chenphaohoa');

function chenphaohoa(){
?>
<link rel="stylesheet" href="https://anonyviet.com/resource/phaohoa/fireworks1.css">
<script src="https://anonyviet.com/resource/phaohoa/fireworks1.js"></script>
<canvas id="fireworks" style="display:none;"></canvas> 
<?php
}

add_action('wp_footer','chenphaohoa');

Thêm code pháo hoa tết vào Blogspot/Website khác

Bạn vào Menu đổi theme của Blogspot, edit html và thực hiện các bước sau:

Vào Blogspot Dashboard
Theme > Edit HTML
Dán code vào vị trí tương ứng bên dưới

Thêm code Trong phần <head>

<link href='https://anonyviet.com/resource/phaohoa/fireworks1.css' rel='stylesheet' type='text/css'/>

Ngay trước thẻ đóng </body>

document.addEventListener("DOMContentLoaded", function() {

const container = document.createElement('div');

container.id = 'fireworks-container';

document.body.appendChild(container);

// Cấu hình pháo hoa

const fireworksConfig = [

{left:"15%", color:"#FF4C4C", explosionType:"circle", size:"large", launchTime:0},

{left:"70%", color:"#FFD24C", explosionType:"star", size:"medium", launchTime:0},

// ... (Giữ nguyên fireworksData như code gốc)

];

fireworksConfig.forEach(config => {

setTimeout(() => launchRocket(container, config), config.launchTime);

});

const maxTime = Math.max(...fireworksConfig.map(f => f.launchTime));

setTimeout(() => launchGrandFinaleRocket(container), maxTime + 4000);

});

</script>

<script src='https://anonyviet.com/resource/phaohoa/fireworks1.js' type='text/javascript'></script>  <script> document.addEventListener("DOMContentLoaded", function() { const container = document.createElement('div'); container.id = 'fireworks-container'; document.body.appendChild(container); // Cấu hình pháo hoa const fireworksConfig = [ {left:"15%", color:"#FF4C4C", explosionType:"circle", size:"large", launchTime:0}, {left:"70%", color:"#FFD24C", explosionType:"star", size:"medium", launchTime:0}, // ... (Giữ nguyên fireworksData như code gốc) ]; fireworksConfig.forEach(config => { setTimeout(() => launchRocket(container, config), config.launchTime); }); const maxTime = Math.max(...fireworksConfig.map(f => f.launchTime)); setTimeout(() => launchGrandFinaleRocket(container), maxTime + 4000); }); </script>

<!-- FIREWORKS SCRIPT -->
<script src='https://anonyviet.com/resource/phaohoa/fireworks1.js' type='text/javascript'></script>

<!-- INITIALIZE FIREWORKS -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    const container = document.createElement('div');
    container.id = 'fireworks-container';
    document.body.appendChild(container);
    
    // Cấu hình pháo hoa
    const fireworksConfig = [
        {left:"15%", color:"#FF4C4C", explosionType:"circle", size:"large", launchTime:0},
        {left:"70%", color:"#FFD24C", explosionType:"star", size:"medium", launchTime:0},
        // ... (Giữ nguyên fireworksData như code gốc)
    ];

    fireworksConfig.forEach(config => {
        setTimeout(() => launchRocket(container, config), config.launchTime);
    });
    
    const maxTime = Math.max(...fireworksConfig.map(f => f.launchTime));
    setTimeout(() => launchGrandFinaleRocket(container), maxTime + 4000);
});
</script>

Code pháo hoa phù hợp với Website có nền màu trắng sáng

Đây là code pháo hoa khi bắn sẽ có thân pháo hoa pháo hình lắp lánh, tỏa sáng đối với các web có nền trắng, tạo hiệu ứng lung linh

<!DOCTYPE html>

<head>

<style>

body {

margin: 0;

background-color: #808080; /* Màu xám cho nền */

overflow: hidden;

}

#fireworksCanvas {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

pointer-events: none;

z-index: 9999;

}

</style>

</head>

<body>

const canvas = document.getElementById('fireworksCanvas');

const ctx = canvas.getContext('2d');

let width = window.innerWidth;

let height = window.innerHeight;

canvas.width = width;

canvas.height = height;

const fireworks = [];

class Firework {

constructor(x, targetY, colors) {

this.x = x;

this.y = height; // Xuất phát từ đáy màn hình

this.targetY = targetY; // Mục tiêu vị trí phát nổ

this.colors = colors;

this.exploded = false;

this.speedY = -6; // Tốc độ bay lên

this.previousPositions = []; // Lưu trữ các vị trí trước đó để vẽ tia sáng

this.particles = []; // Lưu hạt pháo hoa khi nổ

}

createParticles() {

for (let i = 0; i < 80; i++) {

this.particles.push({

x: this.x,

y: this.y,

speed: Math.random() * 3 + 1,

angle: Math.random() * Math.PI * 2,

radius: Math.random() * 2 + 1,

color: this.colors[Math.floor(Math.random() * this.colors.length)],

alpha: 1,

decay: Math.random() * 0.02 + 0.01,

});

}

update() {

if (!this.exploded) {

// Lưu vị trí hiện tại vào mảng previousPositions

this.previousPositions.push({ x: this.x, y: this.y });

// Giữ lại chỉ một số lượng giới hạn vị trí để không làm đầy bộ nhớ

if (this.previousPositions.length > 10) {

this.previousPositions.shift();

}

// Di chuyển pháo hoa lên

this.y += this.speedY;

if (this.y <= this.targetY) {

this.exploded = true;

this.createParticles();

}

} else {

this.updateParticles();

}

updateParticles() {

this.particles.forEach((particle, index) => {

particle.x += Math.cos(particle.angle) * particle.speed;

particle.y += Math.sin(particle.angle) * particle.speed;

particle.alpha -= particle.decay;

if (particle.alpha <= 0) {

this.particles.splice(index, 1);

}

});

}

draw() {

if (!this.exploded) {

// Vẽ tia sáng bằng các đoạn thẳng giữa các vị trí trước đó

ctx.beginPath();

for (let i = 0; i < this.previousPositions.length - 1; i++) {

const start = this.previousPositions[i];

const end = this.previousPositions[i + 1];

ctx.moveTo(start.x, start.y);

ctx.lineTo(end.x, end.y);

}

// Sử dụng màu sắc ngẫu nhiên cho tia sáng

ctx.strokeStyle = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;

ctx.lineWidth = 2; // Độ dày của tia sáng

ctx.stroke();

} else {

// Vẽ các hạt pháo hoa khi nổ

this.particles.forEach((particle) => {

ctx.beginPath();

ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);

ctx.fillStyle = `rgba(${particle.color.r}, ${particle.color.g}, ${particle.color.b}, ${particle.alpha})`;

ctx.fill();

});

}

isDone() {

return this.exploded && this.particles.length === 0;

}

function createFirework() {

const x = Math.random() * width; // Vị trí bắn pháo hoa ngẫu nhiên

const targetY = Math.random() * (height / 2); // Mục tiêu phát nổ trong nửa trên màn hình

const colors = [

{ r: 255, g: 0, b: 0 }, // Đỏ

{ r: 255, g: 255, b: 0 }, // Vàng

{ r: 0, g: 255, b: 0 }, // Xanh lá

{ r: 0, g: 0, b: 255 }, // Xanh dương

{ r: 255, g: 0, b: 255 }, // Tím

];

fireworks.push(new Firework(x, targetY, colors));

}

function animateFireworks() {

ctx.clearRect(0, 0, width, height);

fireworks.forEach((firework, index) => {

firework.update();

firework.draw();

if (firework.isDone()) {

fireworks.splice(index, 1);

}

});

requestAnimationFrame(animateFireworks);

}

// Tạo pháo hoa mới mỗi 3 giây

setInterval(() => {

createFirework();

}, 3000);

window.addEventListener('resize', () => {

width = window.innerWidth;

height = window.innerHeight;

canvas.width = width;

canvas.height = height;

});

animateFireworks();

</script>

</body>

</html>

<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demo Pháo Hoa</title> <style> body { margin: 0; background-color: #808080; /* Màu xám cho nền */ overflow: hidden; } #fireworksCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; } </style> </head> <body> <canvas id="fireworksCanvas"></canvas> <script> const canvas = document.getElementById('fireworksCanvas'); const ctx = canvas.getContext('2d'); let width = window.innerWidth; let height = window.innerHeight; canvas.width = width; canvas.height = height; const fireworks = []; class Firework { constructor(x, targetY, colors) { this.x = x; this.y = height; // Xuất phát từ đáy màn hình this.targetY = targetY; // Mục tiêu vị trí phát nổ this.colors = colors; this.exploded = false; this.speedY = -6; // Tốc độ bay lên this.previousPositions = []; // Lưu trữ các vị trí trước đó để vẽ tia sáng this.particles = []; // Lưu hạt pháo hoa khi nổ } createParticles() { for (let i = 0; i < 80; i++) { this.particles.push({ x: this.x, y: this.y, speed: Math.random() * 3 + 1, angle: Math.random() * Math.PI * 2, radius: Math.random() * 2 + 1, color: this.colors[Math.floor(Math.random() * this.colors.length)], alpha: 1, decay: Math.random() * 0.02 + 0.01, }); } } update() { if (!this.exploded) { // Lưu vị trí hiện tại vào mảng previousPositions this.previousPositions.push({ x: this.x, y: this.y }); // Giữ lại chỉ một số lượng giới hạn vị trí để không làm đầy bộ nhớ if (this.previousPositions.length > 10) { this.previousPositions.shift(); } // Di chuyển pháo hoa lên this.y += this.speedY; if (this.y <= this.targetY) { this.exploded = true; this.createParticles(); } } else { this.updateParticles(); } } updateParticles() { this.particles.forEach((particle, index) => { particle.x += Math.cos(particle.angle) * particle.speed; particle.y += Math.sin(particle.angle) * particle.speed; particle.alpha -= particle.decay; if (particle.alpha <= 0) { this.particles.splice(index, 1); } }); } draw() { if (!this.exploded) { // Vẽ tia sáng bằng các đoạn thẳng giữa các vị trí trước đó ctx.beginPath(); for (let i = 0; i < this.previousPositions.length - 1; i++) { const start = this.previousPositions[i]; const end = this.previousPositions[i + 1]; ctx.moveTo(start.x, start.y); ctx.lineTo(end.x, end.y); } // Sử dụng màu sắc ngẫu nhiên cho tia sáng ctx.strokeStyle = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`; ctx.lineWidth = 2; // Độ dày của tia sáng ctx.stroke(); } else { // Vẽ các hạt pháo hoa khi nổ this.particles.forEach((particle) => { ctx.beginPath(); ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2); ctx.fillStyle = `rgba(${particle.color.r}, ${particle.color.g}, ${particle.color.b}, ${particle.alpha})`; ctx.fill(); }); } } isDone() { return this.exploded && this.particles.length === 0; } } function createFirework() { const x = Math.random() * width; // Vị trí bắn pháo hoa ngẫu nhiên const targetY = Math.random() * (height / 2); // Mục tiêu phát nổ trong nửa trên màn hình const colors = [ { r: 255, g: 0, b: 0 }, // Đỏ { r: 255, g: 255, b: 0 }, // Vàng { r: 0, g: 255, b: 0 }, // Xanh lá { r: 0, g: 0, b: 255 }, // Xanh dương { r: 255, g: 0, b: 255 }, // Tím ]; fireworks.push(new Firework(x, targetY, colors)); } function animateFireworks() { ctx.clearRect(0, 0, width, height); fireworks.forEach((firework, index) => { firework.update(); firework.draw(); if (firework.isDone()) { fireworks.splice(index, 1); } }); requestAnimationFrame(animateFireworks); } // Tạo pháo hoa mới mỗi 3 giây setInterval(() => { createFirework(); }, 3000); window.addEventListener('resize', () => { width = window.innerWidth; height = window.innerHeight; canvas.width = width; canvas.height = height; }); animateFireworks(); </script> </body> </html>

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo Pháo Hoa</title>
  <style>
    body {
      margin: 0;
      background-color: #808080; /* Màu xám cho nền */
      overflow: hidden;
    }
    #fireworksCanvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 9999;
    }
  </style>
</head>
<body>
  <canvas id="fireworksCanvas"></canvas>
  
  <script>
    const canvas = document.getElementById('fireworksCanvas');
    const ctx = canvas.getContext('2d');
    let width = window.innerWidth;
    let height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;

    const fireworks = [];

    class Firework {
      constructor(x, targetY, colors) {
        this.x = x;
        this.y = height; // Xuất phát từ đáy màn hình
        this.targetY = targetY; // Mục tiêu vị trí phát nổ
        this.colors = colors;
        this.exploded = false;
        this.speedY = -6; // Tốc độ bay lên
        this.previousPositions = []; // Lưu trữ các vị trí trước đó để vẽ tia sáng
        this.particles = []; // Lưu hạt pháo hoa khi nổ
      }

      createParticles() {
        for (let i = 0; i < 80; i++) {
          this.particles.push({
            x: this.x,
            y: this.y,
            speed: Math.random() * 3 + 1,
            angle: Math.random() * Math.PI * 2,
            radius: Math.random() * 2 + 1,
            color: this.colors[Math.floor(Math.random() * this.colors.length)],
            alpha: 1,
            decay: Math.random() * 0.02 + 0.01,
          });
        }
      }

      update() {
        if (!this.exploded) {
          // Lưu vị trí hiện tại vào mảng previousPositions
          this.previousPositions.push({ x: this.x, y: this.y });

          // Giữ lại chỉ một số lượng giới hạn vị trí để không làm đầy bộ nhớ
          if (this.previousPositions.length > 10) {
            this.previousPositions.shift();
          }

          // Di chuyển pháo hoa lên
          this.y += this.speedY;
          if (this.y <= this.targetY) {
            this.exploded = true;
            this.createParticles();
          }
        } else {
          this.updateParticles();
        }
      }

      updateParticles() {
        this.particles.forEach((particle, index) => {
          particle.x += Math.cos(particle.angle) * particle.speed;
          particle.y += Math.sin(particle.angle) * particle.speed;
          particle.alpha -= particle.decay;

          if (particle.alpha <= 0) {
            this.particles.splice(index, 1);
          }
        });
      }

      draw() {
        if (!this.exploded) {
          // Vẽ tia sáng bằng các đoạn thẳng giữa các vị trí trước đó
          ctx.beginPath();
          for (let i = 0; i < this.previousPositions.length - 1; i++) {
            const start = this.previousPositions[i];
            const end = this.previousPositions[i + 1];
            ctx.moveTo(start.x, start.y);
            ctx.lineTo(end.x, end.y);
          }
          // Sử dụng màu sắc ngẫu nhiên cho tia sáng
          ctx.strokeStyle = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
          ctx.lineWidth = 2; // Độ dày của tia sáng
          ctx.stroke();
        } else {
          // Vẽ các hạt pháo hoa khi nổ
          this.particles.forEach((particle) => {
            ctx.beginPath();
            ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
            ctx.fillStyle = `rgba(${particle.color.r}, ${particle.color.g}, ${particle.color.b}, ${particle.alpha})`;
            ctx.fill();
          });
        }
      }

      isDone() {
        return this.exploded && this.particles.length === 0;
      }
    }

    function createFirework() {
      const x = Math.random() * width; // Vị trí bắn pháo hoa ngẫu nhiên
      const targetY = Math.random() * (height / 2); // Mục tiêu phát nổ trong nửa trên màn hình
      const colors = [
        { r: 255, g: 0, b: 0 },    // Đỏ
        { r: 255, g: 255, b: 0 },  // Vàng
        { r: 0, g: 255, b: 0 },    // Xanh lá
        { r: 0, g: 0, b: 255 },    // Xanh dương
        { r: 255, g: 0, b: 255 },  // Tím
      ];
      fireworks.push(new Firework(x, targetY, colors));
    }

    function animateFireworks() {
      ctx.clearRect(0, 0, width, height);
      fireworks.forEach((firework, index) => {
        firework.update();
        firework.draw();

        if (firework.isDone()) {
          fireworks.splice(index, 1);
        }
      });

      requestAnimationFrame(animateFireworks);
    }

    // Tạo pháo hoa mới mỗi 3 giây
    setInterval(() => {
      createFirework();
    }, 3000);

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

    animateFireworks();
  </script>
</body>
</html>

Xem thêm: [Lập Trình Game] Bài 10: Tạo Kẻ Thù trong game bằng Godot - Phần 1

Hiệu ứng code pháo hoa là một trong những cách thú vị để tạo điểm nhấn và tăng tính thẩm mỹ cho các trang web hoặc sự kiện đặc biệt như Tết, Giáng Sinh, hay kỷ niệm. Code pháo hoa trong bài được được thiết kế bằng HTML, CSS, và JavaScript, giúp tạo ra những vụ nổ pháo hoa sống động, nhiều màu sắc và có thể dễ dàng tích hợp vào bất kỳ dự án nào. Cảm ơn chủ website https://quaqueviet.nguyenlan.io.vn/ đã share code cho mọi người