Canvas Confetti là một thư viện JavaScript nhỏ gọn, mạnh mẽ và dễ sử dụng để tạo hiệu ứng pháo hoa (confetti) đẹp mắt trên trang web. Thư viện này hỗ trợ nhiều tùy chỉnh như màu sắc, số lượng, góc bắn, tốc độ, v.v.
1. Tại sao chọn Canvas Confetti?
- Nhẹ, không cần tải nặng.
- Tương thích tốt với mọi trình duyệt hiện đại.
- Dễ dàng tích hợp vào dự án với chỉ vài dòng mã.
2. Bắt đầu sử dụng
Bước 1: Thêm Canvas Confetti vào trang web
Bạn có thể thêm Canvas Confetti thông qua CDN hoặc cài đặt bằng npm/yarn.
Cách 1: Thêm qua CDN
Thêm đoạn mã sau vào file HTML của bạn, trong phần <head> hoặc trước thẻ đóng </body>:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
Cách 2: Cài đặt qua npm/yarn
Nếu bạn sử dụng dự án với Node.js, cài đặt bằng lệnh:
npm install canvas-confetti
Sau đó import trong file JavaScript:
import confetti from 'canvas-confetti';
Bước 2: Sử dụng cơ bản
Dưới đây là cách tạo hiệu ứng confetti cơ bản:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Confetti</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
</head>
<body>
<button id="celebrateBtn">Chúc mừng!</button>
<script>
document.getElementById('celebrateBtn').addEventListener('click', () => {
confetti();
});
</script>
</body>
</html>
3. Tùy chỉnh hiệu ứng
Canvas Confetti cung cấp nhiều tùy chọn để bạn tùy chỉnh hiệu ứng theo ý muốn.
Ví dụ: Tùy chỉnh cơ bản
Bạn có thể thay đổi màu sắc, góc bắn, hướng, số lượng, v.v.
document.getElementById('celebrateBtn').addEventListener('click', () => {
confetti({
particleCount: 100, // Số lượng hạt confetti
spread: 70, // Độ lan tỏa
origin: { x: 0.5, y: 0.5 }, // Vị trí bắn (giữa màn hình)
colors: ['#ff0000', '#00ff00', '#0000ff'] // Màu sắc
});
});
Ví dụ: Tạo hiệu ứng liên tục
Để bắn confetti liên tục trong một khoảng thời gian:
let duration = 5 * 1000; // 5 giây
let end = Date.now() + duration;
(function frame() {
confetti({
particleCount: 3,
spread: 60,
origin: { x: Math.random(), y: Math.random() - 0.2 } // Vị trí ngẫu nhiên
});
if (Date.now() < end) {
requestAnimationFrame(frame);
}
})();
4. Ứng dụng thực tế
Tạo hiệu ứng mừng chiến thắng
function celebrateVictory() {
confetti({
particleCount: 150,
spread: 120,
startVelocity: 30,
origin: { x: 0.5, y: 0.7 }, // Vị trí bắn từ giữa, thấp hơn một chút
colors: ['#f39c12', '#d35400', '#e74c3c']
});
}
// Gọi hàm khi người chơi chiến thắng
celebrateVictory();
Tùy chỉnh theo thời gian
Bắn confetti khi đến thời điểm đặc biệt, ví dụ mừng năm mới:
setTimeout(() => {
confetti({
particleCount: 200,
spread: 180,
startVelocity: 40,
origin: { x: 0.5, y: 0.5 }, // Chính giữa màn hình
colors: ['#f1c40f', '#2ecc71', '#3498db', '#9b59b6']
});
}, 5000); // Sau 5 giây
5. Lời kết
Canvas Confetti là một công cụ mạnh mẽ, dễ sử dụng để thêm sự sinh động vào trang web của bạn. Bạn có thể ứng dụng để:
- Mừng sinh nhật.
- Chúc mừng chiến thắng.
- Tạo hiệu ứng khi người dùng hoàn thành nhiệm vụ.
Hãy thử nghiệm và biến trang web của bạn trở nên sống động ngay hôm nay! 🎉