Saturday, August 6, 2011

Tutorial 81 : Snow Ball Effect

Assalamualaikum.. dan selamat  berpuasa.

Bertemu lagi dalam slot tutorial. Jom kita belajar buat snow ball effect dalam blog. Buat yang tak tahu apa benda tu boleh skodeng sini.

Sebelum ini aku ada buat tutorial snow effect juga tapi saiz dia kecil, kali ini kasi besar sikit. Tutorial tersebut di SINI.

Macam mana nak buat?

1. Sign in blogger > Design > Add Gadget > Html/JavaScript
2. Copy code di bawah dan paste ke dalam Html/Java Script


   
              <script>

    //Here you can add your own picture for snow. Just change the url
    var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhejOlk9ZxGBCFji5y3CcDl-5IBj_de9tIrKMVtEIrkV9I_slpSiU0-PMeDPDsGzjWBRWNwVwcl_wEdamot6eBsrG2ILs3VJ-VwpGAySfZaSqrsxgXRjyg9nFUgz29974xuin5FlsuHyu0/s1600/whiteshowNF.png"
    //how many snowflakes there will be (currently 12)
    var no =40;
    //How fast will the snow disappear (0 is never)
    var hidesnowtime = 0;
    //The height the snow will reach before it disappears ("windowheight" or "pageheight")
    var snowdistance = "pageheight";
    ///////////////////////////////End of Settings///////////////////////////////////
    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;
    var am, stx, sty;
    var i, doc_width = 800, doc_height = 600;

    if (ns6up)
    {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
    }
    else
    if (ie4up)
    {
    doc_width = document.body.clientWidth;
    doc_height = document.body.clientHeight;
    }

    dx = new Array();
    xp = new Array();
    yp = new Array();
    am = new Array();
    stx = new Array();
    sty = new Array();

    for (i = 0; i < no; ++ i)
    {
    dx[i] = 0;
    xp[i] = Math.random()*(doc_width-50);
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;
    stx[i] = 0.02 + Math.random()/10;
    sty[i] = 0.7 + Math.random();
    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://rftactical.darkbb.com/index.htm\"><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()
    {
    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)
    {
    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>  


3. Warna yang aku merahkan tu, warna snow ball. Kalau korang nak tukar boleh pilih warna di bawah. ( yang sedia ada tu warna putih )
Blue Snow Ball
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT5eGHfGxzbrotH9rEsHzHAMFnxXJt0TZZpNPs3Dn4yJmwk4rE5uZQRl6SETdPyRzPFH-UykLSiN3dymW6MRZwpvKeSjKWBKtwSOtbFabobGINwSqNp6DXN33BFQXyHvgSWsIS-cIL6d4/s1600/bluesnowNF.png
Pink Snow Ball
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVtuzuOFQTxxGsYCZ1he3Se3gYFCWgIzHsA7oLzzzO6Qwsk21O0BgFgStVtXbuXmnmdobRMDTd3jt3YjdLinUFUchhPuxpyv8z3Wab31lDHtHKXAQQu3xTvDUoDQA_e6dkD0dGuZoxUrE/s1600/redshowNF.png
Black Snow Ball
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_8DnhNVG9KIp-P5Mj_kvUMoX_-iKFvwn6Tx-5sYRubr4-mioh2kjwqo7DfkeVDkmatohk8nNOsw5t8_kKgW7L4_1Z0VsEFx-rviKb4oeLAhhAmt9jVM44LotnjiViReHfwQvevrop8n8/s1600/blacksnowNF.png

4. Save. dan tengok blog korang sejuk ke tak ?? muahaha.


#nak colour pelik-pelik sila create sendiri yerr.. k baiiii
SHARE:

14 comments

  1. cm ne nak wat snow ball 2 merebak ?

    ReplyDelete
  2. dah jadi...thnkz.. ^_^ alhamdulillah...

    ReplyDelete
  3. salam..kak farah..nape snow ball saye ade kat bahagian tepi je?..boleh tak kak farah tolong ajar camner nak buat macam blog dia ni? http://fara-hamster.blogspot.com/

    ReplyDelete
  4. Tq... inna amik yer... hehe comel..

    ReplyDelete
  5. knapa semua tutorial akak x menjadi dalam blog saya??

    ReplyDelete
  6. knapa semua tutorial akak,xmenjadi dlm blog saya??

    ReplyDelete
  7. nak paste kan dkt atas sekali ke,ke kat bwh sekali??(dlm HTML)

    ReplyDelete
  8. akak yg kena copy paste tu dr ats sampai bawah ka... ?

    ReplyDelete
  9. jadi la saya buat..thanks awak coz bg tutorial nie...heheeh

    ReplyDelete
  10. mcm mane nak buat bende2 jatuh/ hujani blog kite yeh ? mcm love/bunge/mcm2 lgi ? canne ek ? :/

    ReplyDelete

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Blogger Copyright © 2019. All Rights Reserved by BLOG CIK NURFARAH