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.

Membuat Animasi Kembang Api Menggunakan FireworksJS

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

20 Agustus 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat