Thư viện hiệu ứng hoa giấy Canvas Confetti

Nếu bạn muốn sử dụng hiệu ứng hoa giấy để thông báo chúc mừng và nhiều hơn nữa, thì thư viện Canvas Confetti là giải pháp hoàn hảo.

Các bạn 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/[email protected]/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.