Belajar html css jquery untuk membuat kembang api dengan mudah

Artikel TOP

Di tutorial saya kali ini akan membagikan sebuah cara bagaimana membuat kembang api dengan bermodalkan html css jquery. Nah perlu diketahui untuk membuat kembang api tersebut disini kita membutuhkan sebuah plugin dari librari jquery.

Plugin dari librari jquery yang digunakan ini merupakan plugin yang simpel secara pemggunaannya dalam membuat kembang api yang nantinya akan kita buat. Lalu bagaimana tampilan dari animasi kembang api yang akan kita buat?

kira-kira berikut tampilannya

Langkah-langkah membuat kembang api dengan HTML CSS Jquery

Berikut ini tutorial cara membuatnya

Siapkan text editor dan web browser

text editor berguna untuk menulis setiap kode yang akan kita buat. Kemudian web browser bermanfaat untuk melihat hasil dari program atau projek yang kita buat.

Siapkan plugin dan librari jquery

Kamu harus mempunyai terlebih dahulu plugin dan librari dari jquery yang akan kita gunakan di projek kita kali ini.

Download Plugin Download Jquery

Jika sudah mengunduh kedua file diatas plugin dan librari jquery, selanjutnya kita akan membuat untuk struktur folder dan filenya seperti gambar berikut dibawah ini

Buat file html

Buat sebuah file html dengan text editor dan berikan nama file tersebut dengan nama firework.html dan isikan kode didalamnya dengan kode html berikut


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kembang Api Dengan HTML CSS JS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
<main></main>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.fireworks.js"></script>
<script type="text/javascript">
    $('main').fireworks({
      sound:true,// sound effect
      opacity: 1.0,
      width:'100%',
      height:'100%'
    });

</script>
</body>
</html>

Buat file css

Setelah file html dan kodingan html diatas sudah selesai kamu buat. kemudian buat file css dan beri nama style.css lalu ketikan sedikit kode css berikut di file css tadi.


body {
  margin: 0;
  padding: 0;
}

main {
  height: 100vh;
  width: 100%;
  background-color: black;
}

Kalau langka-langkah diatas sudah kamu terapkan, coba buka dengan browser file html yang sudah kamu buat.

Saat file html dijalankan di browser maka yang terciptalah animasi kembang api seperti tampilan video dibawah ini.

https://res.cloudinary.com/dssknt9vd/video/upload/v1640965463/kembang-api-hml-css-jquery_vxfxxw.webm

Bagaimana kerenkan? cara diatas saya kira kamu pasti mudah dalam membuatnya. Apalagi kode-kode yang saya buat di tutorial kali ini simpel dan sedikit kodingan.

Terimakasih sudah membaca tutorial saya kali ini semoga bermanfaat dan tetap pantengin blog ini biar kita bisa membahas lebih banyak ilmu lagi.