//Forever Love♥
bubble cursor effect yang comell.

Saturday, 9 April 2011 @ 17:39 | 6 Flying kisses ❤

hye peeps. :)
hari ni wawa nak ajar korang cara buat buble cursor effect yang comell macam wawa punya ni.korang nak? kalau korang nak,jom laa kita belajar buat sama-sama yea.





1. tekan dashboard design page elements add gadget HTML/javascript.

2. sekarang korang copy code dekat bawah ni.
<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#DF01D7", "#DF01D7", "#DF01D7", "#DF01D7", "#DF01D7"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=100; // 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>
3. ini adalah code bubble cursor effect bewarna purple.korang boleh tukar colour code tu dengan colour apa yang korang suka.gantikan #DF01D7 dengan apa-apa code warna yang korang suka.sila tekan sini untuk dapatkan code warna.
contohnya:

ini adalah code asal:
var colours=new Array("#DF01D7", "#DF01D7", "#DF01D7", "#DF01D7", "#DF01D7"); // colours for top, right, bottom and left borders and background of bubbles
ini setelah tukar code warna baru:
var colours=new Array("#FF0080", "#FF0080", "#FF0080", "#FF0080", "#FF0080"); // colours for top, right, bottom and left borders and background of bubbles
4. ini adalah jumlah bubble yang korang nak hasilkan.semakin besar nilai angka tu,semakin banyak bubble yang keluar.korang just gantikan 100 tu kepada nombor lain,misalnya 150.
var bubbles=100; // maximum number of bubbles on screen
5. kalau tiada sebarang masalah,korang boleh laa tekan save dan pegi view blog korang tu.korang cuba laa gerak-gerakkan cursor korang tu,ada tak keluar bubble bubble? kalau dah jadi,sila tekan button like dekat sidebar wawa yea. :)










Older Post | Newer Post
3 applelovelove[s]


Hello little earthling jello, awkward strangers and mysterious stalkers (:



please click the like button to support my blog. :) i love♥ you guys so much.rawr!






Blog's name: ujawa4ever.blogspot.com
Blog's owner: Alwani Zulhilman

I'm using this template from blogskin, tweak and twist the coding and made it mine.

Background :Glitter-graphics
Icons : Iconspedia
Images : We❤it,Glitter-graphics