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



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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOm8NOFjfqhuH5zl_gPh_JFDrAkJIowa3ovmEMf0EJHwRS8bJ_fGFVzvkTYLTFKlf7F_9Q9oBca-TmtyXZaEKeSGlAEokrWkFvd7udU1TG7gwIRLu_F2-cf_BYL3la88JWL7SKS6xplAc/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 2014-10-22T20:28:00+08:00 Rating: 4.5 Diposkan Oleh: Ana Sriwahyuni