Thủ thuật wordpress, Bài Viết

Thêm hiệu ứng pháo hoa bắn lên ở chân trang cho trang web WordPress

Đăng vào Tháng mười một 19, 2024Tháng mười một 19, 2024 bởi admin

admin

19/11/2024

5 Phút đọc

159 Lượt xem

Đánh giá

5/5 - (1 bình chọn)

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:

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');

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

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.

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

Liên hệ qua Zalo Liên hệ qua Facebook Gửi Email Gọi Điện

Thủ thuật wordpress – Code thêm nút Edit nhanh cho Admin trên Mobile WordPress

Nếu bạn là một quản trị viên của website WordPress và đang tìm kiếm cách code thêm nút Edit nhanh cho Admin trên Mobile WordPress...
Cách Tạo Các Cuộc Thi Online Để Tăng Truy Cập Website Mới Nhất 2025

Trong thời đại số hóa hiện nay, việc tăng cường truy cập website trở nên cực kỳ quan trọng. Một trong những chiến lược hiệu...
Cách Đo Lường Hiệu Quả Chiến Dịch Marketing Nội Dung

Trong bối cảnh cạnh tranh ngày càng gay gắt, việc đo lường hiệu quả của các chiến dịch marketing nội dung trở thành yếu tố...
Cách Tạo Ra Một Trang Giới Thiệu Ấn Tượng WordPress

Trong bối cảnh cạnh tranh ngày càng gia tăng trên không gian trực tuyến, việc tạo ra một trang giới thiệu ấn tượng là vô...
Giới thiệu tính năng Flash Sale “Đã bán bao nhiêu” giống Shopee

Nếu bạn là một người bán hàng trực tuyến trên muathemewpgiare.com và muốn tăng cường sự uy tín của cửa hàng mình, chắc chắn bạn...
Hướng Dẫn Cách Ẩn Sản Phẩm Khi Hết Thời Gian Khuyến Mãi

Nếu bạn đang tìm kiếm một giải pháp dễ dàng để ẩn sản phẩm khi hết thời gian khuyến mãi trên website của mình, bài...
Hướng Dẫn Xóa Tab WooCommerce Khỏi Trang Sản Phẩm Một Cách Dễ Dàng

Bạn đang sử dụng WooCommerce cho cửa hàng trực tuyến của mình và cảm thấy trang sản phẩm của mình có quá nhiều tab không...
Code thêm SKU tự động vào đường dẫn của sản phẩm trong WordPress

Trong bài viết này, muathemewpgiare sẽ cùng tìm hiểu cách tự động thêm SKU vào đường dẫn sản phẩm trong WordPress, code thêm SKU tự...
Hướng Dẫn Chi Tiết Cách Sửa Lỗi WordPress Không Được Google Index

Chắc hẳn bạn đang gặp phải tình trạng website WordPress của mình không xuất hiện trên Google, phải không? Điều này không chỉ khiến bạn...
Cách Tạo Biểu Mẫu Đăng Ký Đơn Giản Cho Website Cực Dễ 2025

Trong thế giới số hóa hiện nay, việc tạo một biểu mẫu đăng ký đơn giản cho website là vô cùng cần thiết để thu...
Thêm trường số điện thoại, xoá trường email, website và chống spam bình luận bài viết

Trong quá trình phát triển website, việc quản lý bình luận từ người dùng là một phần quan trọng để duy trì tính tương tác...
Cách Code Fake Số Lượng Hàng Đã Bán Trong Woocommerce (Không Cần Plugin)

Khi phát triển trang thương mại điện tử với Woocommerce trên nền tảng WordPress, ngoài việc cung cấp đầy đủ thông tin sản phẩm như...
[Thủ Thuật WordPress] Code thu gọn bài viết trong WordPress cực đẹp, đơn giản

Nếu bạn đang tìm cách tối ưu hóa giao diện mô tả sản phẩm trên website WordPress sử dụng Woocommerce, bài viết này sẽ cung...
Chương Trình Khuyến Mãi Mua Theme Tháng 01/2025

Chào đón năm mới 2025, Muathemewpgiare.com hân hạnh mang đến chương trình khuyến mãi mua theme wordpress đặc biệt trong suốt tháng 1 với nhiều...
Mua Website Có Sẵn Mới Nhất 2025

Với sự phát triển mạnh mẽ của internet và thương mại điện tử, việc sở hữu một website trở thành yếu tố then chốt giúp...
Chiến Lược Phát Triển SEO Top 1 Google 2025 Dành Cho Người Mới

SEO (Search Engine Optimization) là một trong những chiến lược quan trọng nhất để đưa website của bạn lên vị trí cao trên Google. Đặc...