Kali ini mengenai trik untuk membuat tampilan web/blog dihujani salju atau bisa juga item lainnya sesuai dengan keinginan kalian.
Triknya cukup gampang dan sederhana, berikut instruksi langkah-langkahnya:
Siapkan sebuah gambar yang akan digunakan menjadi gambar salju/benda yang turun. Kalau anda Bingung, gunakan saja gambar ini.
Klik kanan gambar di atas dan save as, lalu upload ke dalam web atau bisa juga ke situs penyimpanan gambar seperti Flickr, atau Photobucket.
Setelah itu masukkan script berikut tepat di atas kode </body>. Dalam blogger, kalian harus masuk ke dalam tata letak dan pilih Edit HTML.
<script type="text/javascript">
/******************************************
* Snow Effect Script- oleh Altan d.o.o. (http://www.altan.hr/snow/index.html) Diposkan oleh MiMuha
******************************************/
// Ubah alamat URL gambar ke lokasi yang anda upload
var snowsrc="salju.gif"
// Ubah jumlah gambar item/salju yang akan tampil pada web
var no = 10;
// Ubah berapa detik salju akan muncul pada web (0=akan selalu muncul):
var hidesnowtime = 0;
// Ubah kapan efek salju akan hilang di bawah halaman ("windowheight" [menghilang saat mencapai bawah window browser] atau "pageheight" [menghilang saat berada di bawah halaman web])
var snowdistance = "pageheight";
///////////Stop Config//////////////////////////////////
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;
if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "salju.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}
function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}
function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}
if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
</script>
Jangan lupa perhatikan tulisan pada kode yang berwarna biru. Setelah itu pratinjau, lihat hasilnya dan simpan.
Seep...! silahkan mencoba ^^
Sekadar tips: agar proses loading tidak lemot, gunakan gambar yang di kompres, kalo perlu ukurannya di bawah 1kb (sekian byte), atau pakai gambar yang hanya berbentuk titik saja (1x1 pixel), jumlah item saljunya kurangi saja dari 10 jadi 5 atau 8, dan atur agar item gambar akan hilang pada posisi bawah window ("windowheight") ... trims ... ^^
KEMBALI KE ATAS
