Code Hiệu Ứng Pháo Hoa Theo Chuột - Trang Trí Website Tết

Code Hiệu Ứng Pháo Hoa Theo Chuột – Trang Trí Website Tết

Code hiệu Ứng Pháo Hoa Theo Chuột là sự kết hợp giữa html, js và css tạo ra một hiệu ứng pháo hoa đẹp mắt, nơi các tia sáng rực rỡ xuất hiện và lan tỏa ngay tại vị trí chuột di chuyển. Với mỗi lần di chuột, các hạt sáng với màu sắc ngẫu nhiên sẽ tạo thành pháo hoa bùng nổ, mang đến cảm giác sinh động và thú vị. Đang chuẩn bị dịp tết về, bạn có thể trang trí Website thêm chút không khí tết bằng các màn pháo hoa đẹp mắt này.

Tham gia kênh Telegram của AnonyViet 👉 Link 👈

Bên cạnh việc trang trí hoa mai đào rơi cho Website, bạn có thể thực hiện hiệu ứng pháo hoa cho đẹp mắt. Ngoài ra mình cũng đã chia sẻ cách tạo hiệu ứng tuyết rơi khi di chuột trên máy tính bằng phần mềm giúp máy tính trong sinh động hơn mùa noel.

Các bài viết liên quan

No Content Available

Xem demo hiệu ứng tại đây, nhớ rê chuột để thấy hiệu ứng.

Full code pháo hoa di chuột trên Website

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fireworks Effect</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
        }

        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="fireworksCanvas"></canvas>

    <script>
        const canvas = document.getElementById("fireworksCanvas");
        const ctx = canvas.getContext("2d");

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        window.addEventListener("resize", () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });

        class Particle {
            constructor(x, y, color) {
                this.x = x;
                this.y = y;
                this.color = color;
                this.size = Math.random() * 5 + 1;
                this.speedX = Math.random() * 4 - 2;
                this.speedY = Math.random() * 4 - 2;
                this.life = Math.random() * 30 + 50;
            }

            update() {
                this.x += this.speedX;
                this.y += this.speedY;
                this.size *= 0.96;
                this.life--;
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
            }
        }

        const particles = [];

        function createFireworks(x, y) {
            const colors = ["#ff5733", "#33ff57", "#5733ff", "#f4ff33", "#ff33e3"];
            for (let i = 0; i < 50; i++) {
                const color = colors[Math.floor(Math.random() * colors.length)];
                particles.push(new Particle(x, y, color));
            }
        }

        function animate() {
            ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            particles.forEach((particle, index) => {
                if (particle.life <= 0 || particle.size <= 0.1) {
                    particles.splice(index, 1);
                } else {
                    particle.update();
                    particle.draw();
                }
            });

            requestAnimationFrame(animate);
        }

        canvas.addEventListener("mousemove", (e) => {
            createFireworks(e.clientX, e.clientY);
        });

        animate();
    </script>
</body>
</html>

Thêm code pháo hoa vào WordPress

Nếu Website bạn dùng WordPress, thì cần tinh chỉnh một xíu để ẩn nền đen của code gốc đi. Bạn có thể tải nhanh Plugin Hiệu Ứng Pháo Hoa Theo Chuột tại đường link này. Sau khi tải về chỉnh cần upload trong mục Plugin và kích hoạt. Sau đó xóa cache (nếu có) và truy cập vào bài viết bất kỳ để thưởng thức màn pháo hoa trên Website của bạn. Bạn có thể xem demo ngay trên viết này.

Xem thêm: GDSCRIPT - Godot Engine cơ bản

Thêm code pháo hoa theo chuộ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>

<style>
#fireworksCanvas {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 999999;
    mix-blend-mode: screen;
}
</style>

Ngay trước thẻ đóng </body>

<canvas id="fireworksCanvas"></canvas>
<script src="https://anonyviet.com/resource/plugin-phao-hoa-theo-chuot/fireworks.js"></script>

Hiệu ứng pháo hoa bắn theo chuột là một cách tuyệt vời để làm nổi bật website của bạn, tạo ra trải nghiệm hấp dẫn cho người truy cập. Hãy thử tích hợp ngay hôm nay và mang đến sự khác biệt cho trang web của bạn!

Nếu bạn gặp khó khăn hoặc có thắc mắc khi sử dụng code này, đừng ngần ngại để lại bình luận hoặc liên hệ để được hỗ trợ.

Câu hỏi thường gặp

Hiệu ứng pháo hoa hoạt động như thế nào?

Hiệu ứng sử dụng JavaScript để tạo ra các hạt nhỏ (particles) xuất hiện và lan tỏa khi chuột di chuyển. Màu sắc của hạt được chọn ngẫu nhiên, tạo ra hiệu ứng pháo hoa sống động.