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 👈 |
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>
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
