Monday, June 6, 2011

Tutorial 53 : Bubbles Cursors

Assalamualaikum..
Sebelum ini aku ada juga buat tutorial cursor yang menarik.. Kalau nak review balik jom ke sini :


Semua tutorial ini untuk cursor belaka.. So korang boleh try mana yang bekenan di hati.
Kali ni nak ajar cara cantikkan cursor juga.. Tapi lain sikit seperti di atas.. Kali ni cursor dalam akurium pula..dia akan berbuih-buih..sangatlah sweet.. Contoh macam ini :

http://t1.gstatic.com/images?q=tbn:ANd9GcR4_oxVXrnywdrWz7hkAg72QWQ7b9KtMa2Psr2IrHWvRR7UiEyeug

Ok.. Jom ikuti cara-cara di bawah ..

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



<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">

        // <![CDATA[



        var colours=new Array("#FC00CE", "#FC00CE", "#FC00CE", "#FC00CE", "#FC00CE"); // colours for top, right, bottom and left borders and background of bubbles



        var bubbles=12; // maximum number of bubbles on screen





        /****************************



        * JavaScript Bubble Cursor *



        * (c) 2010 mf2fm web-design *



        * http://www.mf2fm.com/rv *



        * DON'T EDIT BELOW THIS BOX *



        ****************************/



        var x=ox=400;



        var y=oy=300;



        var swide=800;



        var shigh=600;



        var sleft=sdown=0;



        var bubb=new Array();



        var bubbx=new Array();



        var bubby=new Array();



        var bubbs=new Array();





        window.onload=function() { if (document.getElementById) {



        var rats, div;



        for (var i=0; i<bubbles; i++) {



        rats=createDiv("3px", "3px");



        rats.style.visibility="hidden";





        div=createDiv("auto", "auto");



        rats.appendChild(div);



        div=div.style;



        div.top="1px";



        div.left="0px";



        div.bottom="1px";



        div.right="0px";



        div.borderLeft="1px solid "+colours[3];



        div.borderRight="1px solid "+colours[1];





        div=createDiv("auto", "auto");



        rats.appendChild(div);



        div=div.style;



        div.top="0px";



        div.left="1px";



        div.right="1px";



        div.bottom="0px"



        div.borderTop="1px solid "+colours[0];



        div.borderBottom="1px solid "+colours[2];





        div=createDiv("auto", "auto");



        rats.appendChild(div);



        div=div.style;



        div.left="1px";



        div.right="1px";



        div.bottom="1px";



        div.top="1px";



        div.backgroundColor=colours[4];



        div.opacity=0.5;



        if (document.all) div.filter="alpha(opacity=50)";





        document.body.appendChild(rats);



        bubb[i]=rats.style;



        }



        set_scroll();



        set_width();



        bubble();



        }}





        function bubble() {



        var c;



        if (x!=ox || y!=oy) {



        ox=x;



        oy=y;



        for (c=0; c<bubbles; c++) if (!bubby[c]) {



        bubb[c].left=(bubbx[c]=x)+"px";



        bubb[c].top=(bubby[c]=y)+"px";



        bubb[c].width="3px";



        bubb[c].height="3px"



        bubb[c].visibility="visible";



        bubbs[c]=3;



        break;



        }



        }



        for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);



        setTimeout("bubble()", 40);



        }





        function update_bubb(i) {



        if (bubby[i]) {



        bubby[i]-=bubbs[i]/2+i%2;



        bubbx[i]+=(i%5-2)/5;



        if (bubby[i]>sdown && bubbx[i]>0) {



        if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {



        bubb[i].width=bubbs[i]+"px";



        bubb[i].height=bubbs[i]+"px";



        }



        bubb[i].top=bubby[i]+"px";



        bubb[i].left=bubbx[i]+"px";



        }



        else {



        bubb[i].visibility="hidden";



        bubby[i]=0;



        return;



        }



        }



        }





        document.onmousemove=mouse;



        function mouse(e) {



        set_scroll();



        y=(e)?e.pageY:event.y+sleft;



        x=(e)?e.pageX:event.x+sdown; }





        window.onresize=set_width;



        function set_width() {



        if (document.documentElement && document.documentElement.clientWidth) {



        swide=document.documentElement.clientWidth;



        shigh=document.documentElement.clientHeight;



        }



        else if (typeof(self.innerHeight)=="number") {



        swide=self.innerWidth;



        shigh=self.innerHeight;



        }



        else if (document.body.clientWidth) {



        swide=document.body.clientWidth;



        shigh=document.body.clientHeight;



        }



        else {



        swide=800;



        shigh=600;



        }



        }





        window.onscroll=set_scroll;



        function set_scroll() {



        if (typeof(self.pageYOffset)=="number") {



        sdown=self.pageYOffset;



        sleft=self.pageXOffset;



        }



        else if (document.body.scrollTop || document.body.scrollLeft) {



        sdown=document.body.scrollTop;



        sleft=document.body.scrollLeft;



        }



        else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {



        sleft=document.documentElement.scrollLeft;



        sdown=document.documentElement.scrollTop;



        }



        else {



        sdown=0;



        sleft=0;



        }



        }





        function createDiv(height, width) {


        var div=document.createElement("div");


        div.style.position="absolute";


        div.style.height=height;


        div.style.width=width;


        div.style.overflow="hidden";


        return (div);


        }



        // ]]>


        </script>




@@ Sila tukar font yang berwarna #FC00CE untuk warna buih kesukaan korang. Nak code warna sila ke SINI

3. Preview dan save.. Tapi gerakkan cursor korang dulu


P/s : Nak makan kek Cheese Tiramisu..tetiba pulak..

3 comments:

  1. camn nak besar kan size bubbles tu? nanti tau , tgl link kat shoutbox blog saya k

    ReplyDelete
  2. dekat design ta da pon add gadget...sya pnya cuma ada page element,edit html,ngn edit template ja...cam na erk..sya baru nk blajaq wat blog..

    ReplyDelete

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

Terima kasih lepak sini, nanti datang lagi yer..
Sayang Korang...





Related Posts Plugin for WordPress, Blogger...
 
Copyright © 2016 Blog Cik Nurfarah. All Rights Reserved. Designed by Blog Cik Nurfarah.