-->

K.E ^_~ Yang lagi galau ini penawarnya link

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.



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.

comment 0 komentar:

Posting Komentar

Catatan:
Seluruh komentar yang masuk akan dimoderasi terlebih dahulu. Komentar yang berbau spam, kasar, menghina, seluruhnya yang bersifat menghancurkan bukan membangun tidak akan ditampilkan. Silahkan bertanya dan memberi pendapat dengan sopan dan sesuai aturan.

Anda diperbolehkan mempublikasikan ulang artikel ini, dengan syarat:
1. Mintalah izin dengan cara berkomentar di bawah artikel ini
2. Wajib menyertakan link ke artikel ini dan menyertakan nama penulis

 
© Klikedukasi 2008 - 2013 | Design by Panembahan Satyapradana | 170p3x