Rabu, 22 Oktober 2014

Membuat Efek Kembang Api dengan CSS

Membuat Efek Kembang Api dengan CSS - Pernah bermain kembang api? Atau pernah melihat kembang api meledak dan bertaburan di angkasa di malam hari? Pernah dong.. Biasanya pada hari perayaan seperti hari raya Idul Fitri dan Tahun Baru banyak orang yang merayakannya dengan pesta kembang api

Membuat Efek Kembang Api dengan CSS

Baca juga Menerapkan efek malam di Blog


Tampilan diatas merupakan DEMO dari efek kembang api dengan CSS yang sudah saya pasang di blog ini. Namun sayangnya, untuk membuat efek kembang api dengan CSS ini tidak hanya diperlukan kode CSS saja tapi juga menggunakan kode script. Meski panduan ini saya berikan, kemungkinan besar tidak banyak yang akan menggunakannya karena tidak ada kegunaannya jika ditampilkan di blog, meskipun itu untuk memperindah tampilan blog. Saya kira tidak ada gunanya, sama dengan efek-efek lainnya seperti turun salju, atau daun berjatuhan :)

Baca juga Efek Rontok dengan CSS

Jika ingin memasang efek kembang api dengan css ini kedalam blog Anda, silahkan saja. Namun perlu dipertimbangkan juga untuk penggunaan dan pemasangan kode yang akan bertambah di dalam template blog, jangan sampai seperti blog saya ini, sudah sangat banyak kode css, javascript dan html yang terpasang yang secara langsung juga mempengaruhi loading blog. Jika kode blognya masih sedikit, silahkan dipasang... :)

CSS
Letakkan sebelum ]]></b:skin> atau diantara <style type='text/css'> dan </style>
#stage {
position:relative;
height:400px;
background:#000;
background-image:-webkit-linear-gradient(bottom, #017c0a, #014906 100px, rgba(0,0,0,1) 100px, rgba(0,0,0,0) 300px), url(http://1.bp.blogspot.com/-RBeXl9S4Qbc/VEeRZnF5nUI/AAAAAAAAF0M/SjAz0HQFFno/s1600/efek-kembang-api-css.gif);
background-image:-moz-linear-gradient(bottom, #017c0a, #014906 100px, rgba(0,0,0,1) 100px, rgba(0,0,0,0) 300px);
background-image: -o-linear-gradient(bottom, #017c0a, #014906 100px, rgba(0,0,0,1) 100px, rgba(0,0,0,0) 300px);
background-image: -ms-linear-gradient(bottom, #017c0a, #014906 100px, rgba(0,0,0,1) 100px, rgba(0,0,0,0) 300px);
background-image: linear-gradient(bottom, #017c0a, #014906 100px, rgba(0,0,0,1) 100px, rgba(0,0,0,0) 300px);
}
.launcher {
position:absolute;
-webkit-animation-duration:4s;
-webkit-animation-iteration-count:infinite;
-moz-animation-duration:4s;
-moz-animation-iteration-count:infinite;
background:#fc073b;
border-bottom: 3px solid #2420e1;
}
.launcher div {
position:absolute;opacity:0;
-webkit-animation-name:explosion;
-webkit-animation-duration:4s;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:explosion;
-moz-animation-duration:4s;
-moz-animation-iteration-count:infinite;
left:3px;
top:3px;
width:10px;
height:4px;
border-right:4px solid #2420e1;
border-radius:2px;
-webkit-transform-origin:0 0;
-moz-transform-origin: 0 0;}

HTML
Letakkan kode HTMLnya sesuai keinginan. Misalnya di sidebar melalui menu Tata Letak dengan menambahkan kolom Widget disana :)
<div id="stage">
</div>

SCRIPT
Simpan kode scriptnya sebelum </body>
<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
var num_launchers = 12;
var num_flares = 20;
var flare_colours = ['red', 'aqua', 'violet', 'yellow', 'white', 'blue', 'green'];
var cssIdx = document.styleSheets.length - 1;

function myRandom(from, to)
{
return from + Math.floor(Math.random() * (to-from));
}

var keyframes_template = "from { left: LEFTFROM%; top: 380px; width: 6px; height: 12px; }\n"
+ "33% { left: LEFTTOP%; top: TOPTOPpx; width: 0; height: 0; }\n"
+ " to { left: LEFTEND%; top: BOTBOTpx; width: 0; height: 0; }";

for(var i=0; i < num_launchers; i++) {
leftfrom = myRandom(15, 85);
lefttop = myRandom(30, 70);
toptop = myRandom(20, 200);
leftend = lefttop + (lefttop-leftfrom)/2;
botbot = toptop + 100;

csscode = keyframes_template;
csscode = csscode.replace(/LEFTFROM/, leftfrom);
csscode = csscode.replace(/LEFTTOP/, lefttop);
csscode = csscode.replace(/TOPTOP/, toptop);
csscode = csscode.replace(/LEFTEND/, leftend);
csscode = csscode.replace(/BOTBOT/, botbot);

try { // WebKit browsers
csscode2 = "@-webkit-keyframes flight_" + i + " {\n" + csscode + "\n}";
document.styleSheets[cssIdx].insertRule(csscode2, 0);
} catch(e) { }

try { // Mozilla browsers
csscode2 = "@-moz-keyframes flight_" + i + " {\n" + csscode + "\n}";
document.styleSheets[cssIdx].insertRule(csscode2, 0);
} catch(e) { }
}

for(var i=0; i < num_launchers; i++) {
var rand = myRandom(0, flare_colours.length - 1);
var rand_colour = flare_colours[rand];
var launch_delay = myRandom(0,100) / 10;

csscode = ".launcher:nth-child(" + num_launchers + "n+" + i + ") {\n"
+ " -webkit-animation-name: flight_" + i + ";\n"
+ " -webkit-animation-delay: " + launch_delay + "s;\n"
+ " -moz-animation-name: flight_" + i + ";\n"
+ " -moz-animation-delay: " + launch_delay + "s;\n"
+ "}";
document.styleSheets[cssIdx].insertRule(csscode, 0);

csscode = ".launcher:nth-child(" + num_launchers + "n+" + i + ") div {"
+ " border-color: " + rand_colour + ";\n"
+ " -webkit-animation-delay: " + launch_delay + "s;\n"
+ " -moz-animation-delay: " + launch_delay + "s;\n"
+ "}";
document.styleSheets[cssIdx].insertRule(csscode, 0);
}

for(var i=0; i < num_flares; i++) {
csscode = ".launcher div:nth-child(" + num_flares + "n+" + i + ") {\n"
+ " -webkit-transform: rotate(" + (i * 360/num_flares) + "deg);\n"
+ " -moz-transform: rotate(" + (i * 360/num_flares) + "deg);\n"
+ "}";
document.styleSheets[cssIdx].insertRule(csscode, 0);
}

for(var i=0; i < num_launchers; i++) {
var newdiv = document.createElement("div");
newdiv.className = "launcher";
for(var j=0; j < num_flares; j++) {
newdiv.appendChild(document.createElement("div"));
}
document.getElementById("stage").appendChild(newdiv);
}
}, false);

// ]]>
</script>


Silahkan jika tertarik untuk membuat dan memasang efek kembang api dengan CSS seperti yang telah dibahas di atas. Semoga bermanfaat

Membuat Efek Kembang Api dengan CSS Rating: 4.5 Diposkan Oleh: ana sriwahyuni

52 komentar:

  1. makin keren postingnya, mau belajar dan copas skiprnya. semoga diijinkan

    BalasHapus
  2. Menarik jika di pajang pada area postingan blog saya nih Mbak Ana
    Ijin save css nya ya Mbak. suatu saat saya perlu tinggal di terapin
    Makasih Mbak sudah berbagi salam sukses dan ceria selalu :)

    BalasHapus
  3. Wah ga berani pasang ah, takut pengunjung pada kaget sama kembang apinya. Dar, Der, Dor hehehe.

    BalasHapus
    Balasan
    1. hihiii awaz mas nanti di kira blognya teroris... hehehee :D

      Hapus
  4. Pasti ada pengaruhnya ya mbak dengan blog. mungkin loading blog akan tambah berat..

    BalasHapus
    Balasan
    1. sepertinya iya mas, tapi untuk blog saya ini masih belum begitu mas..

      Hapus
  5. keliatan rame seperti kayak malem tahun baruan di ancol ya mbak hehehe :)

    BalasHapus
    Balasan
    1. hehehee iya mbak Susi,, tapi saya belum pernah ke ancol mbak :)

      Hapus
    2. Kapan2 janjian bareng main kesana mbak :)

      Hapus
  6. mantab nih eek kembang apinya...sippp :)

    BalasHapus
    Balasan
    1. nggak pingin nyoba mas dipasang di blognya?

      Hapus
  7. wah panjang benar ya mbak kode CSS nya, tapi akan saya coba deh, soalnya penasaran kayak mana jadinya :D

    BalasHapus
    Balasan
    1. hehehee.. gak usah penasaran mas, kan sudah ada demonya diatas..

      Hapus
  8. menggerakkan objek dengan animasi delay untuk memanggil fungsi iteration anime, namun efek perlu dukungan script-jQuery mbak ana, karena script yang digunakan adalah variable color.

    BalasHapus
    Balasan
    1. untuk fungsi dan penggunaan script tidak saya jelaskan mbak karena agar teman-teman lebih mudah menggunakannya
      secara singkat, terimakasih banyak mbak Devy atas penjelasannya :)

      Hapus
  9. kalo sudah seperti ini gampang praktekinnya, tinggal pasang

    serasa tahun baru ya mba.. :)

    BalasHapus
    Balasan
    1. langsung dapet hasil jadinya mas,, kalau tampilannya besar, lebih bagus lagi mas...

      Hapus
  10. cocok pas dipasang saat tahun baru mbak.. :)

    BalasHapus
    Balasan
    1. benar mas dan kalau di modif lagi akan tambah bagus :)

      Hapus
  11. nice mba,,, jadi lebih rame dan cantik pastinya. saya pernah dulu cm efeknya lumayan juga sih ,,,, salam sukses selalu

    BalasHapus
    Balasan
    1. heheheee.. iya mas..
      terimakasih banyak ya mas, sukses selalu juga... :)

      Hapus
  12. Kunjungan siang yang mulai terik, ijin ngadem disini Mbak Ana. sambil baca ulang ulasan membuat Effects kembang api dengan CSS ya Mbak.. semoga ini tidak terlalu membebani loading blog karena komposisinya menggunakan CSS, Jadi gak begitu berat load Effects nya. :-bd

    BalasHapus
    Balasan
    1. silahkan mas, semoga tambah adem aja... kalau untuk loading, selama kode template masih tidak banyak, tidak akan memberatkan kok mas... ;)

      Hapus
  13. baru kunjung ne mbak...
    wahh efek kembang apinya keren juga ya mbak... apalagi penggabungan antara css dan javascript... sipp dah :-d

    BalasHapus
    Balasan
    1. keren mana sama adminnya coba?

      Hapus
    2. lebih keren mas Yanto dong... :D

      Hapus
  14. rame ya mba blognya sampe jauh banget cuma mau komentar aja.
    sukses deh buat adminya dan pengunjungnya

    BalasHapus
    Balasan
    1. sama-sama mas Arif,, sukses selalu buat mas Arif juga...

      Hapus
  15. saya simpen dulu mbak,entar kalau mau tahun baru dipasang deh

    BalasHapus
  16. seru banget kalau efek kembang api ini di pasang di blog desa, pasti KPK pada ikutan pengen masang juga nih.
    coba di testingnya di blog baru saya yang lainnya nih.

    BalasHapus
    Balasan
    1. pasti seru mas, coba dipasang ya mas :)

      Hapus
  17. wah makasih mbak,,ijin copy ya,,belajar koding lagi,,hihihi

    BalasHapus
    Balasan
    1. sama-sama mas,, silahkan dan semoga bermanfaat.. :)

      Hapus
  18. Pasti cantik blog Neng kalo diberi animasi ini ya bund????

    BalasHapus
  19. wahh hebat banget, saya belum bisa pasangnya mba takut salah..

    BalasHapus
    Balasan
    1. :) ga' apa-apa mbak, kalau pun salah nantinya tidak akan berfungsi... :)

      Hapus
  20. izin copy dan modifikasi cssnya mbak,

    BalasHapus
    Balasan
    1. sippp.. silahkan mas, bisa lebih bagus nich nantinya...

      Hapus
  21. boleh juga ni. Kapan-kapan mau dipraktekin ah. Izin save dulu mbak :D

    BalasHapus
    Balasan
    1. silahkan mabk Siti,, semoga bermanfaat ya.. :)

      Hapus
  22. Efek Kembang Api dengan CSS nya keren mba :) nanti aku coba pasang ah di blog saya hehehe... makasih ya mba

    BalasHapus
    Balasan
    1. sama-sama mas, semoga bermanfaat ya.. :)

      Hapus
  23. Kayaknya perlu panduan mbak ana deh :D hihi

    BalasHapus
  24. keren,bentar lagi tahun baru sepertinya bagus dipasang untuk hari H nya,hh

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia