Cara membuat Javascript Salju bertaburan di Blog

Javascript Snow on Page - JavaScript ini ialah Javascript Hujan salju yang bertaburan di halaman web atau blog kita, yang nantinya bisa kita ubah warnanya sesuai selera kita.

Sebenarnya javascript ini tergolong jadul, dulu pernah tenar di masanya ketika masih ada Mywapblog dan XtGem. Tapi sekarang sudah hampir punah karna mengingat resikonya yang membuat web atau blog kita menjadi agak lelet untuk di jelajahi. Makanya javascript ini jadi jarang di pakai lagi.

Tujuan Admin posting javascript ini mungkin sebagian dari sobat masih ada yang mencari javascript ini untuk mempercantik web atau blog. Ya,, sekalian Admin share aja koleksi Javascript jadul ini yang pernah Admin pasang di Wapsite dulu.

Untuk tutorialnya silahkan sobat Copy dulu scriptnya di bawah:

if ((document.getElementById) &&
window.addEventListener || window.attachEvent){

(function(){

//Configure here.

var num = 100; //Number of flakes
var timer = 10; //setTimeout speed. Varies on different comps
var enableinNS6 = 1 //Enable script in NS6/Mozilla? Snow animation could be slow in those browsers. (1=yes, 0=no).

//End.

var y = [];
var x = [];
var fall = [];
var theFlakes = [];
var sfs = [];
var step = [];
var currStep = [];
var h,w,r;
var d = document;
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

if (d.documentElement.style &&
typeof d.documentElement.style.MozOpacity == "string")
num = 12;

for (i = 0; i < num; i++){
sfs[i] = Math.round(1 + Math.random() * 1);

document.write('<div id="flake'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:'
+sfs[i]+'px;height:'+sfs[i]+'px;background-color:navy;font-size:'+sfs[i]+'px"><\/div>');

currStep[i] = 0;
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}

if (domWw) r = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}
}

function scrl(yx){
var y,x;
if (domSy){
y = r.pageYOffset;
x = r.pageXOffset;
}
else{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}

function snow(){
var dy,dx;

for (i = 0; i < num; i++){
dy = fall[i];
dx = fall[i] * Math.cos(currStep[i]);

y[i]+=dy;
x[i]+=dx;

if (x[i] >= w || y[i] >= h){
y[i] = -10;
x[i] = Math.round(Math.random() * w);
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}

theFlakes[i].top = y[i] + scrl(0) + pix;
theFlakes[i].left = x[i] + scrl(1) + pix;

currStep[i]+=step[i];
}
setTimeout(snow,timer);
}

function init(){
winsize();
for (i = 0; i < num; i++){
theFlakes[i] = document.getElementById("flake"+(idx+i)).style;
y[i] = Math.round(Math.random()*h);
x[i] = Math.round(Math.random()*w);
}
snow();
}

if (window.addEventListener && enableinNS6){
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",winsize);
window.attachEvent("onload",init);
}

})();
}//End.
</script>

- Setelah semuanya di Copy, silahkan sobat pergi ke menu Tata letak di blog sobat dan tambahkan widget, pilih HTML/Javascript. Terus pastekan script tadi. Selesai!

- Perhatikan:
• var numb = 100; //Number of flakes Angka 100 untuk jumlah salju yang akan ditampilkan. Admin sarankan 100 kebawah saja, karena semakin banyak salju yang ditampilkan maka semakin berat pula Load Page web atau blog sobat.
• var timer = 10; //setTimeout speed Angka 10 adalah kecepatan waktu salju keluar, tinggal setting sesuai selera.
• background-color:navy; sobat tinggal ganti warnanya sesuai keinginan masing-masing

Nah,, berikut Cara mudah membuat Javascript Salju bertaburan di Blog, silahkan sobat atur sendiri sesuai selera masing-masing. Selamat mencoba, semoga bermanfaat.

Ali Hyuuga

Hanya seorang blogger pemula yang selalu ingin tau

Icon Header

Kategori dibawah header

Cara membuat Javascript Salju bertaburan di Blog

Belum ada Komentar

Posting Komentar

Iklan Di Atas Artikel

Iklan Di Tengah Artikel

Iklan Di Bawah Artikel

Menu Navigasi Footer