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
Đâ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(){
?>
<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>
<!-- 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>
<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>
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
