-->
Home
Al
code

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

tháng 12 23, 2024

 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.



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.

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:

  1. Vào Blogspot Dashboard
  2. Theme > Edit HTML
  3. 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!

<trong file js>

//--------------------------------------------------------------------------------------
const canvas = document.getElementById("fireworksCanvas");
const ctx = canvas.getContext("2d");

function initCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

initCanvas();
window.addEventListener("resize", initCanvas);

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 = [];
const colors = ["#ff5733", "#33ff57", "#5733ff", "#f4ff33", "#ff33e3"];

function createFireworks(x, y) {
    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.clearRect(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);
}

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

animate();
//--------------------------------------------------------------------------------------

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ợ.


Đăng nhận xét

Post Advertisement
Post Advertisement