Bubble & Bintang Pada Cursor !

by Sho Reen 5:57:00 PM 0 comments bintang bintang bertaburan blogger bubble cara-cara cursor cute cursor macam mana tutorial

 

Woke! Hari ni nak buat Tutorial lagi.

Tutorial pasal macam mana nak letak Bubble atau Bintang Pada Cursor ~

Cuba gerakkan cursor aku ni, ade keluar bubble kan?

Ataupun korang pergi kat >sini< , gerakan cursor, ada bintang bertaburan kan?

Nak buat?

Jom tengok ni!

Bubbles

•   Pergi Dashboard ~> Design ~> Page Element ~> Add Gadget >  HTML/JavaScript

• Copy/Paste pada ruang HTML?JavaScript tu : 

<span style="color: green;"></span><script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/bubblecursor.js"></script><script type="text/javascript"><br><br>// <![CDATA[<br><br>var colours=new Array("#FF00D5", "#FF24DB", "#FF44E1", "#FF5FE5", "#FF86EB"); // colours for top, right, bottom and left borders and background of bubbles<br><br>var bubbles=100; // maximum number of bubbles on screen<br><br><br><br>/****************************<br><br>* JavaScript Bubble Cursor *<br><br>* (c) 2010 mf2fm web-design *<br><br>* http://www.mf2fm.com/rv *<br><br>* DON'T EDIT BELOW THIS BOX *<br><br>****************************/<br><br>var x=ox=400;<br><br>var y=oy=300;<br><br>var swide=800;<br><br>var shigh=600;<br><br>var sleft=sdown=0;<br><br>var bubb=new Array();<br><br>var bubbx=new Array();<br><br>var bubby=new Array();<br><br>var bubbs=new Array();<br><br><br><br>window.onload=function() { if (document.getElementById) {<br><br>var rats, div;<br><br>for (var i=0; i<bubbles; i++) {<br><br>rats=createDiv("3px", "3px");<br><br>rats.style.visibility="hidden";<br><br><br><br>div=createDiv("auto", "auto");<br><br>rats.appendChild(div);<br><br>div=div.style;<br><br>div.top="1px";<br><br>div.left="0px";<br><br>div.bottom="1px";<br><br>div.right="0px";<br><br>div.borderLeft="1px solid "+colours[3];<br><br>div.borderRight="1px solid "+colours[1];<br><br><br><br>div=createDiv("auto", "auto");<br><br>rats.appendChild(div);<br><br>div=div.style;<br><br>div.top="0px";<br><br>div.left="1px";<br><br>div.right="1px";<br><br>div.bottom="0px"<br><br>div.borderTop="1px solid "+colours[0];<br><br>div.borderBottom="1px solid "+colours[2];<br><br><br><br>div=createDiv("auto", "auto");<br><br>rats.appendChild(div);<br><br>div=div.style;<br><br>div.left="1px";<br><br>div.right="1px";<br><br>div.bottom="1px";<br><br>div.top="1px";<br><br>div.backgroundColor=colours[4];<br><br>div.opacity=0.5;<br><br>if (document.all) div.filter="alpha(opacity=50)";<br><br><br><br>document.body.appendChild(rats);<br><br>bubb[i]=rats.style;<br><br>}<br><br>set_scroll();<br><br>set_width();<br><br>bubble();<br><br>}}<br><br><br><br>function bubble() {<br><br>var c;<br><br>if (x!=ox || y!=oy) {<br><br>ox=x;<br><br>oy=y;<br><br>for (c=0; c<bubbles; c++) if (!bubby[c]) {<br><br>bubb[c].left=(bubbx[c]=x)+"px";<br><br>bubb[c].top=(bubby[c]=y)+"px";<br><br>bubb[c].width="3px";<br><br>bubb[c].height="3px"<br><br>bubb[c].visibility="visible";<br><br>bubbs[c]=3;<br><br>break;<br><br>}<br><br>}<br><br>for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);<br><br>setTimeout("bubble()", 40);<br><br>}<br><br><br><br>function update_bubb(i) {<br><br>if (bubby[i]) {<br><br>bubby[i]-=bubbs[i]/2+i%2;<br><br>bubbx[i]+=(i%5-2)/5;<br><br>if (bubby[i]>sdown && bubbx[i]>0) {<br><br>if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {<br><br>bubb[i].width=bubbs[i]+"px";<br><br>bubb[i].height=bubbs[i]+"px";<br><br>}<br><br>bubb[i].top=bubby[i]+"px";<br><br>bubb[i].left=bubbx[i]+"px";<br><br>}<br><br>else {<br><br>bubb[i].visibility="hidden";<br><br>bubby[i]=0;<br><br>return;<br><br>}<br><br>}<br><br>}<br><br><br><br>document.onmousemove=mouse;<br><br>function mouse(e) {<br><br>set_scroll();<br><br>y=(e)?e.pageY:event.y+sleft;<br><br>x=(e)?e.pageX:event.x+sdown; }<br><br><br><br>window.onresize=set_width;<br><br>function set_width() {<br><br>if (document.documentElement && document.documentElement.clientWidth) {<br><br>swide=document.documentElement.clientWidth;<br><br>shigh=document.documentElement.clientHeight;<br><br>}<br><br>else if (typeof(self.innerHeight)=="number") {<br><br>swide=self.innerWidth;<br><br>shigh=self.innerHeight;<br><br>}<br><br>else if (document.body.clientWidth) {<br><br>swide=document.body.clientWidth;<br><br>shigh=document.body.clientHeight;<br><br>}<br><br>else {<br><br>swide=800;<br><br>shigh=600;<br><br>}<br><br>}<br><br><br><br>window.onscroll=set_scroll;<br><br>function set_scroll() {<br><br>if (typeof(self.pageYOffset)=="number") {<br><br>sdown=self.pageYOffset;<br><br>sleft=self.pageXOffset;<br><br>}<br><br>else if (document.body.scrollTop || document.body.scrollLeft) {<br><br>sdown=document.body.scrollTop;<br><br>sleft=document.body.scrollLeft;<br><br>}<br><br>else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {<br><br>sleft=document.documentElement.scrollLeft;<br><br>sdown=document.documentElement.scrollTop;<br><br>}<br><br>else {<br><br>sdown=0;<br><br>sleft=0;<br><br>}<br><br>}<br><br><br><br>function createDiv(height, width) {<br>var div=document.createElement("div");<br>div.style.position="absolute";<br>div.style.height=height;<br>div.style.width=width;<br>div.style.overflow="hidden";<br>return (div);<br>}<br><br>// ]]><br></script>

• Nampak x code yg ini berada pada HTML di atas?

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

#Yang Merah tu ialah colour pada bubble korang. Korang boleh tukar warna dia dengan pilihkan code warna & gantikan yg warna merah tu. Korang boleh pilih code warna kat sini : HTML Colour Codes

• Ok lepas tu jangan lupe click save kalau dah puas hati ! Nak tengok Preview pon boleh!

Bintang

Cara dia sama jugak ! Copy & Paste pada ruang HTML/JavaScript. Korang boleh dapatkan code dia kat sini :

Cursor Bintang 1

atau sini

Cursor Bintang 2

Selamat Mencuba !