Membuat Animasi Kembang Api Menggunakan FireworksJS

FireworksJs adalah suatu animasi  plugin jQuery yang mudah digunakan dan dapat dikonfigurasi untuk membuat animasi kembang api yang realistis dengan efek suara ledakan. Pada kesempatan kali ini saya akan Membuat Animasi Kembang Api Menggunakan FireworksJS. Tahap pertama yang harus di persiapkan yaitu teman-teman download file plugin jquery disini. Jika sudah maka tahap selanjunya teman-teman bisa siapkan struktur html seperti script di bawah ini.

<!DOCTYPE html>
<html>
<head>
    <title>Cara Membuat Animasi Fireworks Jquery</title>
    <style>
        body{
            padding:0;
            margin:0;
            background: url("bg.jpg");
            background-size: cover;
        }
        .fireworks{
            position: absolute;
            left:0;
            top:0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="fireworks"></div>
</body>
</html>

Dan jangan lupa sematkan dua link ini didalam tag head html yang sudah kalian buat.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="fireworks/jquery.fireworks.js"></script>

Nah langkah terakhir masih didalam satu file yang sama, teman-teman buat script untuk menjalankan animasi kembang apinya seperti berikut ini.

<script>
        $('.fireworks').fireworks({
          sound: true, // sound effect
          opacity: 0.8,
          width: '100%',
          height: '100%'
        });
    </script>

Nama selector  $('.fireworks') teman-teman pastikan sama dengan nama div yang teman-teman buat di html. Dan untuk option sound teman-teman bisa pakai dengan memberikan nilai true untuk menjalankannya. Dan opacity adalah bayangan gelap yang akan diberikan ke div class fireworks agar terkesan seperti malam hari. Jika teman-teman buka di halaman browser maka akan seperti pada gambar di bawah ini.

Demikian artikel tentang cara Membuat Animasi Kembang Api Menggunakan FireworksJS. Semoga dapat bermanfaat dan selamat mencoba!