Hiệu ứng pháo hoa bằng JavaScript là một trong những đoạn code thú vị và trực quan nhất trang trí cho website trong những dịp Tết đến. Thay vì sử dụng các hình ảnh có sẵn, hiệu ứng này được tạo ra hoàn toàn bằng mã nguồn thông qua HTML5 Canvas.
Sử dụng phương thức requestAnimationFrame(), JavaScript có thể render hàng ngàn hạt cùng lúc với tốc độ 60 khung hình/giây (60 FPS), tạo ra chuyển động mượt mà mà không làm lag trình duyệt. Việc thao tác với mã màu HSL (Hue, Saturation, Lightness) giúp việc tạo ra những dải màu sắc rực rỡ và ngẫu nhiên trở nên cực kỳ đơn giản.
Bước 1:
Nhúng trực tiếp trong thẻ <script> ở <head> hoặc <body>
Download mã firework.js về máy:
<script type=”text/javascript” src=”path-to-file/firework.js”></script>
hoặc sử dụng link trực tiếp:
<script type=”text/javascript” src=”https://lyminhhoang.com/asset/js/firework.js”></script>
Bước 2:
Chèn đoạn html sau vào sau thẻ body
<canvas id=”canvas” style=’position:fixed;width:100%;pointer-events:none;z-index:9999;’></canvas>
