Dưới đây là đoạn mã chi tiết để thêm hiệu ứng pháo hoa bắn lên ở chân trang cho trang web WordPress của bạn. Chức năng này sẽ giúp trang web trở nên hấp dẫn hơn, tạo điểm nhấn thú vị cho người dùng khi họ cuộn xuống cuối trang.
Hướng Dẫn Thêm Hiệu Ứng Pháo Hoa Chân Trang
Mình sẽ cung cấp mã bao gồm PHP, CSS, và JavaScript để tạo hiệu ứng pháo hoa. Bạn cần thêm đoạn mã PHP vào tệp functions.php của Child Theme của bạn.
Bước 1: Thêm Hiệu Ứng JavaScript và CSS vào Footer
Để tạo ra hiệu ứng pháo hoa, chúng ta sẽ sử dụng JavaScript và Canvas để tạo ra các chùm pháo hoa.
Thêm đoạn mã sau vào tệp functions.php của Child Theme:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | function add_fireworks_footer_script() { // Chèn JavaScript vào cuối trang ?> <script> document.addEventListener("DOMContentLoaded", function() { // Tạo canvas cho pháo hoa let canvas = document.createElement("canvas"); canvas.id = "fireworksCanvas"; canvas.style.position = "fixed"; canvas.style.bottom = "0"; canvas.style.left = "0"; canvas.style.width = "100%"; canvas.style.height = "100%"; canvas.style.pointerEvents = "none"; document.body.appendChild(canvas); const ctx = canvas.getContext("2d"); let fireworks = []; // Hàm khởi tạo pháo hoa function Firework(x, y) { this.x = x; this.y = y; this.age = 0; this.exploded = false; this.particles = []; } Firework.prototype.update = function() { if (!this.exploded) { this.y -= 4; if (Math.random() < 0.05 || this.y < window.innerHeight / 2) { this.exploded = true; for (let i = 0; i < 100; i++) { this.particles.push(new Particle(this.x, this.y)); } } } else { this.age += 1; this.particles.forEach(particle => particle.update()); } }; Firework.prototype.draw = function(ctx) { if (!this.exploded) { ctx.beginPath(); ctx.arc(this.x, this.y, 3, 0, Math.PI * 2); ctx.fillStyle = "orange"; ctx.fill(); } else { this.particles.forEach(particle => particle.draw(ctx)); } }; function Particle(x, y) { this.x = x; this.y = y; this.age = 0; this.size = Math.random() * 3 + 1; this.speedX = Math.random() * 6 - 3; this.speedY = Math.random() * 6 - 3; this.gravity = 0.05; } Particle.prototype.update = function() { this.x += this.speedX; this.y += this.speedY + this.gravity; this.age += 1; }; Particle.prototype.draw = function(ctx) { ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fillStyle = `rgba(255, ${Math.floor(Math.random() * 255)}, 0, ${1 - this.age / 100})`; ctx.fill(); }; function loop() { ctx.clearRect(0, 0, canvas.width, canvas.height); fireworks = fireworks.filter(firework => firework.age < 100 || !firework.exploded); fireworks.forEach(firework => { firework.update(); firework.draw(ctx); }); if (Math.random() < 0.05) { fireworks.push(new Firework(Math.random() * window.innerWidth, window.innerHeight)); } requestAnimationFrame(loop); } // Thiết lập kích thước canvas cho phù hợp với màn hình function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } window.addEventListener("resize", resizeCanvas); resizeCanvas(); loop(); }); </script> <style> #fireworksCanvas { z-index: 9999; } </style> <?php } add_action('wp_footer', 'add_fireworks_footer_script'); |
Giải Thích Đoạn Mã:
Khởi tạo Canvas và Hiệu Ứng Pháo Hoa:
- JavaScript tạo một thẻ <canvas> với id là fireworksCanvas, và đặt nó ở vị trí cố định (position: fixed) để luôn hiển thị ở chân trang.
- Canvas có chiều rộng và chiều cao tương ứng với kích thước của cửa sổ trình duyệt (window.innerWidth và window.innerHeight).
Các Hàm JavaScript Chính:
- Firework(): Hàm khởi tạo pháo hoa. Khi bắn lên, pháo hoa sẽ nổ và tạo ra nhiều hạt (particles).
- Particle(): Hàm khởi tạo các hạt khi pháo hoa nổ, các hạt này sẽ di chuyển theo các hướng ngẫu nhiên.
- loop(): Vòng lặp chính để cập nhật và vẽ các pháo hoa và hạt pháo hoa.
CSS để Đảm Bảo Hiển Thị:
- z-index: Đảm bảo canvas có z-index cao để không bị các thành phần khác của trang che phủ.
- pointer-events: none: Đảm bảo canvas không ngăn cản việc người dùng tương tác với các phần tử khác trên trang.
Sử Dụng Đoạn Mã:
Sau khi thêm đoạn mã trên vào tệp functions.php, hiệu ứng pháo hoa sẽ tự động hiển thị ở chân trang của toàn bộ website. Không cần thêm shortcode nào khác.
Lưu Ý:
Tối Ưu Hóa Trải Nghiệm Người Dùng: Hiệu ứng pháo hoa rất đẹp nhưng có thể ảnh hưởng đến hiệu năng nếu người dùng có cấu hình máy thấp. Bạn nên kiểm tra kỹ trước khi triển khai trên trang web sản xuất.
Với đoạn mã này, website của bạn sẽ có thêm hiệu ứng pháo hoa thú vị ở cuối trang, giúp tạo ra trải nghiệm tương tác và hấp dẫn hơn đối với người dùng.
- Hướng dẫn tích hợp mã QR Code thanh toán vào đơn hàng WooCommerce WordPress
- Kho Theme WordPress Giá Rẻ – Đẳng Cấp, Chuyên Nghiệp, Phong Phú
- #1 Cách ẩn nút Thêm vào giỏ hàng hoặc Giá trong WooCommerce
- Chiến Lược Phát Triển SEO Top 1 Google 2025 Dành Cho Người Mới
- 100 Theme WordPress Bán Hàng Chuẩn SEO Miễn Phí Dành Cho Bạn