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.
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>:
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:
Sau đó import trong file JavaScript:
Bước 2: Sử dụng cơ bản
Dưới đây là cách tạo hiệu ứng confetti cơ bản:
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 webBạ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>:
JavaScript:
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/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:
Mã:
npm install canvas-confetti
Mã:
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:
HTML:
<!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/canvas-confetti@1.6.0/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>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ụ.