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:

Unknown mengatakan...

ada previewnya gak ?

Deo Pradipta mengatakan...

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

purplekyu^_^ mengatakan...
Komentar ini telah dihapus oleh pengarang.
purplekyu^_^ mengatakan...

cool! thanks...^_^

Deo Pradipta mengatakan...

@Purple : ur weLcomE !!!

hilman mengatakan...

bagus banget boos
tq buat tutorialnya

Deo Pradipta mengatakan...

@hilman : thanks, bro !!

"icaL" mengatakan...

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

Deo Pradipta 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

gALih 7.1 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 ! ^_^

Unknown 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..

Unknown mengatakan...

kagak kenapa??

Deo Pradipta mengatakan...

gpp.. hohoho.. ^_^

Unknown 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 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

safirah 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 ^^

Unknown 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

Unknown mengatakan...

makasih buat infonya ^_*

Deo Pradipta mengatakan...

wokee sob.. samasama :)

Asal Tulis Tapi Realistis mengatakan...

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

Deo Pradipta mengatakan...

mancaappppp jugaaa ^^b

Unknown 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

Unknown 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 Aufar 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 :)

ZULFArahma mengatakan...

coba ah

Deo Pradipta mengatakan...

silahkan dicoba ^^

Galihhhh mengatakan...

bisa diganti ga sob warna'a ??

Deo Pradipta mengatakan...

var colour="white";

ganti tulisan white dgn warna yang diinginkan :)

Unknown mengatakan...

thanks ya Gan !! skrang gua udh bisa ^^


skli lagi mksih bnyk ~

Unknown mengatakan...

mksh inpo nya gan ....

Unknown mengatakan...

opsi rancangan itu dimana gan? maaf ane masih newbie

Unknown 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

Unknown mengatakan...

ada efek yg laen gk bos ?

Unknown mengatakan...

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

Posting Komentar

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