Các bạn có thể bấm vào đây để xem demo nhé!

HTML

Đầu tiên, nhúng thư viện Canvas Confetti vào trang web của bạn.

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>

JavaScript

Cơ bản nhất, bạn chỉ cần gọi mặc định như sau.

confetti();

Hoặc cấu hình nâng cao hơn bằng cách tham khảo tại đây.

Khai báo hàm để tiện sử dụng

Bạn cũng có thể khai báo thành một hàm để việc sử dụng trở nên dễ dàng hơn, ví dụ:

function fireEmoji(emoji = '❤️', sec = 0.1) {
    var duration = sec * 1000;
    var end = Date.now() + duration;
    var scalar = 2.5;
    var heart = confetti.shapeFromText({ text: emoji, scalar });

    (function frame() {
        confetti({
            spread: 360,
            ticks: 60,
            gravity: 0,
            decay: 0.96,
            startVelocity: 20,
            shapes: [heart],
            scalar,
            particleCount: 30
        });
        confetti({
            spread: 360,
            ticks: 60,
            gravity: 0,
            decay: 0.96,
            startVelocity: 20,
            shapes: [heart],
            scalar,
            particleCount: 5,
            flat: true
        });
        if (Date.now() < end) {
            requestAnimationFrame(frame);
        }
    }());
}

Để sử dụng, các bạn chỉ cần gọi hàm như sau.

fireEmoji('🦄', 0.5);

Ứng dụng thực tế

• Khi người dùng hoàn thành form (ví dụ: đăng ký, bình chọn, đặt hàng)
• Khi người dùng đạt mốc nào đó (ví dụ: điểm cao, level mới)
• Tạo trải nghiệm vui nhộn khi click một nút bất kỳ

Gợi ý thêm

• Bạn có thể kết hợp với thư viện như SweetAlert2 hoặc Toastify để popup thông báo thêm phần sinh động
• Có thể gọi confetti({...}) với hàng loạt tuỳ chọn: angle, spread, gravity, origin, zIndex, v.v…

Kết luận

canvas-confetti là thư viện nhẹ, dễ dùng và cực kỳ vui nhộn để tạo tương tác sinh động cho website. Chỉ với một đoạn mã nhỏ, bạn đã có thể khiến trải nghiệm người dùng trở nên đáng nhớ hơn rất nhiều.

Chúc các bạn thành công!