Kembang api virtual saat ramadhan (fireworks effect)

Suatu tradisi yang cukup berbahaya dan sebenarnya bukan tradisi dari Islam saat bulan Ramadhan adalah bermunculannya petasan, kembang api dan sejenisnya. Saya tidak akan menyinggung tentang halal haram tradisi ini, saya lebih melihat kepada sisi positifnya. Yang dicari para penikmat petasan dan kembang api sebenarnya adalah sensasi. Ya sensasinya saat petasan itu meledak, dan sensasi saat kembang api itu membuncah di udara. Sebenarnya jika hanya sensasi itu yang kita cari, kita masih bisa membuatnya dengan lebih aman dan tentunya hemat biaya. Inilah yang akan kita bahas, cara membuat kembang api virtual menggunakan javascript :ganteng

Karena hanya sensasi kembang api yang kita cari, maka tidak perlu repot-repot koding dari awal untuk membuat fireworks effect, ambil saja script open source yang sudah jadi kemudian modifikasi sesuai kebutuhan. Saya menggunakan script dari http://www.mf2fm.com/rv untuk membuat efek kembang api ini.

Demo Kembang Api Virtual Download

Menggunakan script dari mf2fm sangat simple. Hanya perlu memanggil script kembangapi.js ke dalam file html menggunakan tag script

<script type="text/javascript" src='js/kembangapi.js'></script>

Sampai disitu efek kembang api sebenarnya sudah ada. Hanya kurang pas rasanya kalo belum ada pengaturan background dan lainnya. Untuk keperluan itu saya menambahkan beberapa script css, secara umum struktur folder yang saya buat sebagai berikut:

• index.html
• css
  • grid.css
  • normalize.css
  • style.css
• js
  • kembangapi.js
• images
  • footer-pedesaan.gif
  • tipis-kanan.png
  • tipis-kiri.png
  • tipis-tengah.png

Karena fireworks itu bagus dilihat pada malam hari, maka backgroundnya pun di sesuaikan dengan suasana malam hari. Pengaturannya terletak pada file style.css

body {
    background:url(../images/footer-pedesaan.gif) repeat-x center bottom #1d1435!important;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 1em;
    color: #8a8683;
    background-color:#1d1435;
}

Biar lebih jelas silahkan download saja sourcenya kemudian pelajari sendiri.