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.
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.
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(){
?>
<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
Câu hỏi thường gặp
Tôi có thể sử dụng code pháo hoa này trên website của mình không?
Có, code pháo hoa được viết bằng JavaScript, HTML và CSS, tương thích với hầu hết các trình duyệt hiện đại và dễ dàng tích hợp vào website của bạn.
Code pháo hoa có ảnh hưởng đến tốc độ tải trang web không?
Không đáng kể. Code được tối ưu để nhẹ nhàng và không gây ảnh hưởng đến tốc độ tải trang web.
Tôi có thể tùy chỉnh code pháo hoa theo ý muốn không?
Có, bạn có thể tùy chỉnh màu sắc, kích thước, tần suất và hiệu ứng của pháo hoa để phù hợp với thiết kế website của mình.
