Menambah Efek Saat Mouse di Gerakkan

      Mau aksesoris-aksesoris blog lainnya..,  ini agak berbeda, biasanya kan efek ini langsung dengan sendirinya, tapi disini efek ini akan muncul jika mouse digerakkan.., efeknya itu seperti salju yang berjatuhan.., mau lihat seperti apa efeknya ?? klik [link] Coba gerakkan mousenya di blog tersebut.., muncul kan ??..,
      Mau gak efek seperti itu ?? Ikuti cara berikut kalau mau :
  1. Copy kode berikut :
  2. <script>
       // <![CDATA[
                var colour="white";
                var sparkles=100;
         
                var x=ox=400;
                var y=oy=300;
                var swide=800;
                var shigh=600;
                var sleft=sdown=0;
                var tiny=new Array();
                var star=new Array();
                var starv=new Array();
                var starx=new Array();
                var stary=new Array();
                var tinyx=new Array();
                var tinyy=new Array();
                var tinyv=new Array();
                window.onload=function() { if (document.getElementById) {
                  var i, rats, rlef, rdow;
                  for (var i=0; i<sparkles; i++) {
                    var rats=createDiv(3, 3);
                    rats.style.visibility="hidden";
                    document.body.appendChild(tiny[i]=rats);
                    starv[i]=0;
                    tinyv[i]=0;
                    var rats=createDiv(5, 5);
                    rats.style.backgroundColor="transparent";
                    rats.style.visibility="hidden";
                    var rlef=createDiv(1, 5);
                    var rdow=createDiv(5, 1);
                    rats.appendChild(rlef);
                    rats.appendChild(rdow);
                    rlef.style.top="3px";
                    rlef.style.left="0px";
                    rdow.style.top="0px";
                    rdow.style.left="3px";
                    document.body.appendChild(star[i]=rats);
                  }
                  set_width();
                  sparkle();
                }}
                function sparkle() {
                  var c;
                  if (x!=ox || y!=oy) {
                    ox=x;
                    oy=y;
                    for (c=0; c<sparkles; c++) if (!starv[c]) {
                      star[c].style.left=(starx[c]=x)+"px";
                      star[c].style.top=(stary[c]=y)+"px";
                      star[c].style.clip="rect(0px, 5px, 5px, 0px)";
                      star[c].style.visibility="visible";
                      starv[c]=50;
                      break;
                    }
                  }
                  for (c=0; c<sparkles; c++) {
                    if (starv[c]) update_star(c);
                    if (tinyv[c]) update_tiny(c);
                  }
                  setTimeout("sparkle()", 40);
                }
                function update_star(i) {
                  if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
                  if (starv[i]) {
                    stary[i]+=1+Math.random()*3;
                    if (stary[i]<shigh+sdown) {
                      star[i].style.top=stary[i]+"px";
                      starx[i]+=(i%5-2)/5;
                      star[i].style.left=starx[i]+"px";
                    }
                    else {
                      star[i].style.visibility="hidden";
                      starv[i]=0;
                      return;
                    }
                  }
                  else {
                    tinyv[i]=50;
                    tiny[i].style.top=(tinyy[i]=stary[i])+"px";
                    tiny[i].style.left=(tinyx[i]=starx[i])+"px";
                    tiny[i].style.width="2px";
                    tiny[i].style.height="2px";
                    star[i].style.visibility="hidden";
                    tiny[i].style.visibility="visible"
                  }
                }
                function update_tiny(i) {
                  if (--tinyv[i]==25) {
                    tiny[i].style.width="1px";
                    tiny[i].style.height="1px";
                  }
                  if (tinyv[i]) {
                    tinyy[i]+=1+Math.random()*3;
                    if (tinyy[i]<shigh+sdown) {
                      tiny[i].style.top=tinyy[i]+"px";
                      tinyx[i]+=(i%5-2)/5;
                      tiny[i].style.left=tinyx[i]+"px";
                    }
                    else {
                      tiny[i].style.visibility="hidden";
                      tinyv[i]=0;
                      return;
                    }
                  }
                  else tiny[i].style.visibility="hidden";
                }
                document.onmousemove=mouse;
                function mouse(e) {
                  set_scroll();
                  y=(e)?e.pageY:event.y+sdown;
                  x=(e)?e.pageX:event.x+sleft;
                }
                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;
                  }
                }
                window.onresize=set_width;
                function set_width() {
                  if (typeof(self.innerWidth)=="number") {
                    swide=self.innerWidth;
                    shigh=self.innerHeight;
                  }
                  else if (document.documentElement && document.documentElement.clientWidth) {
                    swide=document.documentElement.clientWidth;
                    shigh=document.documentElement.clientHeight;
                  }
                  else if (document.body.clientWidth) {
                    swide=document.body.clientWidth;
                    shigh=document.body.clientHeight;
                  }
                }
                function createDiv(height, width) {
                  var div=document.createElement("div");
                  div.style.position="absolute";
                  div.style.height=height+"px";
                  div.style.width=width+"px";
                  div.style.overflow="hidden";
                  div.style.backgroundColor=colour;
                  return (div);
                }
                // ]]></script>
  3. Agak banyak ya ?? hehehe.., lalu copy kode diatas dikotak HTML/ Java Script di Rancangan..,
  4. Sudah deh.., lalu liat blog kamu, gerak-gerakan mousenya sesukamu.., efek tersebut tidak akan pernah habis.
     Begitulah akhir dari cara Menambahkan Efek Saat Mouse di Gerakkan.., jangan lupa komentarnya., semoga bermanfaat saja bagi kalian ya !!

Artikel Terkait

66 komentar:

Muhammad Taqi mengatakan...

ada previewnya gak ?

Deo Pein Nagato mengatakan...

http://spenzaba8c.blogspot.com/, disitu bro !

PurPLe T0T =p mengatakan...
Komentar ini telah dihapus oleh pengarang.
PurPLe T0T =p mengatakan...

cool! thanks...^_^

Deo Pein Nagato mengatakan...

@Purple : ur weLcomE !!!

hilman mengatakan...

bagus banget boos
tq buat tutorialnya

Deo Pein Nagato mengatakan...

@hilman : thanks, bro !!

"icaL" mengatakan...

thankz.........yah ..blog.y sgat bguzz

Deo Pein Nagato mengatakan...

@"ical" : thankz :)

Mochamad Ryansyah mengatakan...

blog'y keren banget.. yg w cari ada semua.
thanks yea...
btw cara bikin efek petir ky gitu gimana ya?

Deo Pradipta mengatakan...

hehe.. sama2 kak ^_^
itu mah background :D

Seonega-arpega mengatakan...

thanks banget y gan!!!!!!!!!!!11

Deo Pradipta mengatakan...

okrek gan.. sama2 ;)

Fakhri Muhammad mengatakan...

kwrenn...
I Like this Blog.. :)

Deo Pradipta mengatakan...

hohoho.. makasih sobb !!! \m/

miftachul huda mengatakan...

tanks

Deo Pradipta mengatakan...

sama_sama sob ! ^_^

diitra mengatakan...

mas cara membuat menu yang diatas itu gimana iya?
mohon bantuannya iyaa..
kirim ke email iya : dhianoditra@ymail.com

Deo Pradipta mengatakan...

hm.. kagak sob.. maaf..

diitra mengatakan...

kagak kenapa??

Deo Pradipta mengatakan...

gpp.. hohoho.. ^_^

diitra mengatakan...

yahh, ajarin donk mas,

asnensidalimunthe mengatakan...

mksh.....
membuat ilmu saya bertambah
:)

Funny-chz.blogspot.com mengatakan...

Ty Gan..

Deo Pradipta mengatakan...

@diitra : kapan2 aja dah sob ^_^
@asnen : wah.. senang juga bisa membantu :)

Deo Pradipta mengatakan...

@funny : sama2 gan ^_^

M Imron Pribadi mengatakan...

AL KHAMDULLILLAH , mantap sekali gan, telah aku coba sukses 100% tapi bagaimana yaaa agar bintang jatuhnya diganti tulisan tulisan yang jatuh atau foto foto kecil gan?

SALAM MAKRIFATBUSINESS.NET

http;//makrifatbusiness.net

Deo Pradipta mengatakan...

wah.. belom tau ane sob.. maaf yakk.. makasih juga :D

Rhisma's mengatakan...

blog ku jadi bgus hehe..makasih ya :)

Deo Pradipta mengatakan...

waha .. senang bisa membantu... sama^^ :D

rumah tips dan belanja mengatakan...

backgroud petirnya ambil darimana? pengen tuch

nur safirah bt mokhdzir mengatakan...

nk buat mcam mana ni..

Deo Pradipta mengatakan...

@rumah tips : kesini aja sob http://dopind.blogspot.com/2011/10/membuat-background-blog-dengan-gambar.html ^^

@nur : tinggal coppas aja sob :D

lisapermatasari mengatakan...

baguss ,, :D
tapi agak bingung sama 'lalu copy kode diatas dikotak HTML/ Java Script di Rancangan".., ITU MAKSUD NYA DI 'edit HTML bukan ,,?? makasihh yyee,, >,<

lisapermatasari mengatakan...

udah bisa2,, hehe :P
tapi ada 1 lagi,, ganti warna nya bisa gx,,??

Deo Pradipta mengatakan...

sepp kakak ^_^

ganti var colour="white"; .. ganti tuh warnanya sob ^^

Karina Julita mengatakan...

makasih infonya kak,punya blog ku udah jadi ^^

Deo Pradipta mengatakan...

wah.. semoga betah dengan aksesoris ini ^^

Ahmad GigaStand mengatakan...

trma kasih atas info nya,,, sukses,,,..
jgn lipa kunjungi blog saya juga ya
http://gigastandpicture.blogspot.com

Deo Pradipta mengatakan...

iya sob.. samasama atas kunjungannya :)
langsung ke TKP sob :D

PNPM KOTA AMBON mengatakan...

Wah tnks ya....bgs skali......sukses

Deo Pradipta mengatakan...

iya sob.. samasama :D

we_^^earnest ^^ mengatakan...

makasih buat infonya ^_*

Deo Pradipta mengatakan...

wokee sob.. samasama :)

Roman Ikaros mengatakan...

mancappp....!!!!!!!!

Deo Pradipta mengatakan...

mancaappppp jugaaa ^^b

hn mutiara mengatakan...

bagus banget . bLog aku jadi cantik B)
.
thanks udah bnyk yg berhasil nih Liat http://kreasiisengmiti.blogspot.com/
ahahay pamer :D
tapi aku ada belumpaham kalau Lewat Desain gmn mksutnya kak .

Deo Pradipta mengatakan...

ehehe.. kalo blog aku ganteng :D
samaasamaa sob.. kalo lewat desain itu harus di lirik2 terus agar terbiasa ngutak ngatiknya :-D

hn mutiara mengatakan...

berasa horror waktu pertama masuk blog ini ada petirnya gitu :D


kalo edit html tuh gimana caranya
misal nih disuruh paste diatas , nah kan kalo misalnya tulisan banyak gimana ?!.

Deo Pradipta mengatakan...

ehehe.. padahal blognya bukan horor2 :D

lho ? ya pake 'ctrl + c' trus 'ctrl + v' ._.

Farhan mengatakan...

ini di copas semuanya apa salah saru bro?

Deo Pradipta mengatakan...

semuanyaa dong sob ^^

Distro_Club mengatakan...

Rancangan di mana ya mas bro gw bru buka blog nih

Distro_Club mengatakan...

Maaf Bru buat blog jadi gk ngerti banyak

Deo Pradipta mengatakan...

di template baru, rancangan itu sama aja layout sob :)

ZULFAmuanizt mengatakan...

coba ah

Deo Pradipta mengatakan...

silahkan dicoba ^^

Galih Putra Ramadhan mengatakan...

bisa diganti ga sob warna'a ??

Deo Pradipta mengatakan...

var colour="white";

ganti tulisan white dgn warna yang diinginkan :)

Rena Ferinda Dewi mengatakan...

thanks ya Gan !! skrang gua udh bisa ^^


skli lagi mksih bnyk ~

Wiko Setyawan mengatakan...

mksh inpo nya gan ....

Bambang Ardie mengatakan...

opsi rancangan itu dimana gan? maaf ane masih newbie

Andreas FPSParulian mengatakan...

gk ngerti mksdnya dimana sih.......rancangan dimana itu

Anonim mengatakan...

ribet bro,..rancangan/tata letak apa template,..HTML/Javascript,.
pusing pilih yg mana,..tolong di perjelas,..thanks

Ian Jion mengatakan...

ada efek yg laen gk bos ?

SMP Beringin Ratu mengatakan...

edit tata letak, tambah gadget,,, pilih gatget HTML/JAVA SCRIPT,,, PASTE CODE DI ATAS,,, simpan....

Poskan Komentar

Askorus Distro Askorus Distro
Copyright 2010 - 2012 ^ Akatsuki Blog™ - Compatible with Chrome 1024 x 768 -