Animasi Kursor Blog

14.00

Berikut ini untuk mempercantik blog anda salahsatunya dengan membuat efek bintang jatuh dari cursor di blog, animasi bintang jatuh adalah sebuah animasi kursor yang berupa bintang bertaburan yang jatuh dari cursor atau mouse ketika digerakkan, hal ini sangat menarik untuk dipasang di sebuah blog atau website karena animasi nya yang indah dan unik sehingga akan menarik visitor blog untuk betah tinggal lama-lama untuk membaca blog sobat

Buat sobat yang senang me-modifikasi blog nya dengan sesuatu yang beda dan unik mungkin perlu mencoba animasi bintang jatuh yang satu ini. Cara membuat bintang jatuh ini juga tidak susah-susah amat dan sobat tidak perlu meng-edit kode yang ada di template, cukup hanya copy paste kode-kode yang akan saya berikan dibawah nanti ke edit html pada bagian add gadget dan juga untuk mengganti warna bintang nya pun sobat bisa rubah sesuai dengan warna background template blog sobat dengan bantuan Colorpic software, tertarik? silahkan ikuti tutorial blogger dibawah ini

Pemasangan Efek Bintang Jatuh Pada Cursor di Blogger

Login di Blogger
Pilih Design > Add gadget > HTML/Javascript
Masukkan kode dibawah ini ke kolom HTML/Javascript

Selamat mencoba,
sumber : blogpeer.blogspot.com

list dari HTML/Javascript adalah sbb:

</p>
<p>
<script type='text/javascript'> </p>
<p>
// <![CDATA[ </p>
<p>
var colour="#52D8ED"; </p>
<p>
var sparkles=100; </p>
<p>
var x=ox=400; </p>
<p>
var y=oy=300; </p>
<p>
var swide=800; </p>
<p>
var shigh=600; </p>
<p>
var sleft=sdown=0; </p>
<p>
var tiny=new Array(); </p>
<p>
var star=new Array(); </p>
<p>
var starv=new Array(); </p>
<p>
var starx=new Array(); </p>
<p>
var stary=new Array(); </p>
<p>
var tinyx=new Array(); </p>
<p>
var tinyy=new Array(); </p>
<p>
var tinyv=new Array(); </p>
<p>
window.onload=function() { if (document.getElementById) { </p>
<p>
var i, rats, rlef, rdow; </p>
<p>
for (var i=0; i<sparkles; i++) { </p>
<p>
var rats=createDiv(3, 3); </p>
<p>
rats.style.visibility="hidden"; </p>
<p>
document.body.appendChild(tiny[i]=rats); </p>
<p>
starv[i]=0; </p>
<p>
tinyv[i]=0; </p>
<p>
var rats=createDiv(5, 5); </p>
<p>
rats.style.backgroundColor="transparent"; </p>
<p>
rats.style.visibility="hidden"; </p>
<p>
var rlef=createDiv(1, 5); </p>
<p>
var rdow=createDiv(5, 1); </p>
<p>
rats.appendChild(rlef); </p>
<p>
rats.appendChild(rdow); </p>
<p>
rlef.style.top="3px"; </p>
<p>
rlef.style.left="0px"; </p>
<p>
rdow.style.top="0px"; </p>
<p>
rdow.style.left="3px"; </p>
<p>
document.body.appendChild(star[i]=rats); </p>
<p>
} </p>
<p>
set_width(); </p>
<p>
sparkle(); </p>
<p>
}} </p>
<p>
function sparkle() { </p>
<p>
var c; </p>
<p>
if (x!=ox || y!=oy) { </p>
<p>
ox=x; </p>
<p>
oy=y; </p>
<p>
for (c=0; c<sparkles; c++) if (!starv[c]) { </p>
<p>
star[c].style.left=(starx[c]=x)+"px"; </p>
<p>
star[c].style.top=(stary[c]=y)+"px"; </p>
<p>
star[c].style.clip="rect(0px, 5px, 5px, 0px)"; </p>
<p>
star[c].style.visibility="visible"; </p>
<p>
starv[c]=50; </p>
<p>
break; </p>
<p>
} </p>
<p>
} </p>
<p>
for (c=0; c<sparkles; c++) { </p>
<p>
if (starv[c]) update_star(c); </p>
<p>
if (tinyv[c]) update_tiny(c); </p>
<p>
} </p>
<p>
setTimeout("sparkle()", 40); </p>
<p>
} </p>
<p>
function update_star(i) { </p>
<p>
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)"; </p>
<p>
if (starv[i]) { </p>
<p>
stary[i]+=1+Math.random()*3; </p>
<p>
if (stary[i]<shigh+sdown) { </p>
<p>
star[i].style.top=stary[i]+"px"; </p>
<p>
starx[i]+=(i%5-2)/5; </p>
<p>
star[i].style.left=starx[i]+"px"; </p>
<p>
} </p>
<p>
else { </p>
<p>
star[i].style.visibility="hidden"; </p>
<p>
starv[i]=0; </p>
<p>
return; </p>
<p>
} </p>
<p>
} </p>
<p>
else { </p>
<p>
tinyv[i]=50; </p>
<p>
tiny[i].style.top=(tinyy[i]=stary[i])+"px"; </p>
<p>
tiny[i].style.left=(tinyx[i]=starx[i])+"px"; </p>
<p>
tiny[i].style.width="2px"; </p>
<p>
tiny[i].style.height="2px"; </p>
<p>
star[i].style.visibility="hidden"; </p>
<p>
tiny[i].style.visibility="visible" </p>
<p>
} </p>
<p>
} </p>
<p>
function update_tiny(i) { </p>
<p>
if (--tinyv[i]==25) { </p>
<p>
tiny[i].style.width="1px"; </p>
<p>
tiny[i].style.height="1px"; </p>
<p>
} </p>
<p>
if (tinyv[i]) { </p>
<p>
tinyy[i]+=1+Math.random()*3; </p>
<p>
if (tinyy[i]<shigh+sdown) { </p>
<p>
tiny[i].style.top=tinyy[i]+"px"; </p>
<p>
tinyx[i]+=(i%5-2)/5; </p>
<p>
tiny[i].style.left=tinyx[i]+"px"; </p>
<p>
} </p>
<p>
else { </p>
<p>
tiny[i].style.visibility="hidden"; </p>
<p>
tinyv[i]=0; </p>
<p>
return; </p>
<p>
} </p>
<p>
} </p>
<p>
else tiny[i].style.visibility="hidden"; </p>
<p>
} </p>
<p>
document.onmousemove=mouse; </p>
<p>
function mouse(e) { </p>
<p>
set_scroll(); </p>
<p>
y=(e)?e.pageY:event.y+sdown; </p>
<p>
x=(e)?e.pageX:event.x+sleft; </p>
<p>
} </p>
<p>
function set_scroll() { </p>
<p>
if (typeof(self.pageYOffset)=="number") { </p>
<p>
sdown=self.pageYOffset; </p>
<p>
sleft=self.pageXOffset; </p>
<p>
} </p>
<p>
else if (document.body.scrollTop || document.body.scrollLeft) { </p>
<p>
sdown=document.body.scrollTop; </p>
<p>
sleft=document.body.scrollLeft; </p>
<p>
} </p>
<p>
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { </p>
<p>
sleft=document.documentElement.scrollLeft; </p>
<p>
sdown=document.documentElement.scrollTop; </p>
<p>
} </p>
<p>
else { </p>
<p>
sdown=0; </p>
<p>
sleft=0; </p>
<p>
} </p>
<p>
} </p>
<p>
window.onresize=set_width; </p>
<p>
function set_width() { </p>
<p>
if (typeof(self.innerWidth)=="number") { </p>
<p>
swide=self.innerWidth; </p>
<p>
shigh=self.innerHeight; </p>
<p>
} </p>
<p>
else if (document.documentElement && document.documentElement.clientWidth) { </p>
<p>
swide=document.documentElement.clientWidth; </p>
<p>
shigh=document.documentElement.clientHeight; </p>
<p>
} </p>
<p>
else if (document.body.clientWidth) { </p>
<p>
swide=document.body.clientWidth; </p>
<p>
shigh=document.body.clientHeight; </p>
<p>
} </p>
<p>
} </p>
<p>
function createDiv(height, width) { </p>
<p>
var div=document.createElement("div"); </p>
<p>
div.style.position="absolute"; </p>
<p>
div.style.height=height+"px"; </p>
<p>
div.style.width=width+"px"; </p>
<p>
div.style.overflow="hidden"; </p>
<p>
div.style.backgroundColor=colour; </p>
<p>
return (div); </p>
<p>
} </p>
<p>
// ]]> </p>
<p>
</script></p>
<p>
</p>
</div>

Tidak ada komentar

Langganan: Posting Komentar ( Atom )