Tutorial cara buat efek Shooting Star pada blog

Tutorial cara buat efek Shooting Star pada blog by Blogger blog TUtorial

Aku suka nama efek ni ..sama macam nama geng kereta(animasi) DashYanKuro yang top suatu ketika dahulu

pergi ke desbot---desaign---ada gajet---html / javascript...copy javascript di bawah dan paste...senangkan

<script type="text/javascript">
// <![CDATA[
var speed=20; // how fast - smaller is faster
var how_often=5; // average time between re-appearances of the comet (in seconds)
var colours=new Array("#f00", "#f60", "#f93", "#fa5", "#fb6", "#fc7", "#fd8", "#fe9", "#ffa", "#ffb", "#ffc"); 
// above line lists colours for the comet and its tail (can be as long or short as you like)

/****************************
* Shooting Star/Comet Effect*
*(c)2008-11 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
* Tutorial by Polskahackrew *
****************************/
var dx, dy;
var xpos=new Array();
var ypos=new Array();
var swide=800;
var shigh=600;
var tail=colours.length;

function write_comet(a) {
  var b, t, s;
  if (!document.getElementById("bod")) {
    b=document.createElement("div");
    b.style.position="absolute";
    b.setAttribute("id", "bod");
    document.body.appendChild(b);
  }
  set_scroll();
  set_width();
  for (i=0; i<tail; i++) {
    s=1+(i<tail/4)+(!i);
    t=div("comet"+a+i, s, s);
    b.appendChild(t);
  }
}

function div(id, w, h) {
  var d=document.createElement("div");
  d.style.position="absolute";
  d.style.overflow="hidden";
  d.style.width=w+"px";
  d.style.height=h+"px";
  d.setAttribute("id", id);
  return (d);
}

function stepthrough(a) {
  var i;
  if (Math.random()<0.008||ypos[0]+dy<4||xpos[0]+dx<4||xpos[0]+dx>=swide-4||ypos[0]+dy>=shigh-4) {
    for (i=0; i<tail; i++) setTimeout('document.getElementById("comet'+a+i+'").style.backgroundColor="transparent"', speed*(tail-i));
    setTimeout('launch("'+a+'")', Math.max(500, 2000*Math.random()*how_often));
  }
  else setTimeout('stepthrough("'+a+'")', speed);
  for (i=tail-1; i>=0; i--) {
    if (i) {
      xpos[i]=xpos[i-1];
      ypos[i]=ypos[i-1];
    }
    else {
      xpos[i]+=dx;
      ypos[i]+=dy;
    }
    document.getElementById("comet"+a+i).style.left=xpos[i]+"px";
    document.getElementById("comet"+a+i).style.top=ypos[i]+"px";
  }
}

function launch(a) {
  var i;
  dx=(Math.random()>0.5?1:-1)*(2+Math.random()*3);
  dy=(Math.random()>0.5?1:-1)*(2+Math.random()*3);
  xpos[0]=2*tail*dx+Math.round(Math.random()*(swide-4*tail*dx));
  ypos[0]=2*tail*dy+Math.round(Math.random()*(shigh-4*tail*dy));
  for (i=0; i<tail; i++) {
    xpos[i]=xpos[0];
    ypos[i]=ypos[0];
    document.getElementById("comet"+a+i).style.backgroundColor=colours[i];
  }
  stepthrough(a);
}

window.onscroll=set_scroll;
function set_scroll() {
  var sleft, sdown;
  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;
  }
  var s=document.getElementById("bod").style;
  s.top=sdown+"px";
  s.left=sleft+"px";
}

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;
  }
}

window.onload=function() { if (document.getElementById) {
  var alpha=String.fromCharCode(65+Math.floor(Math.random()*26));
  write_comet(alpha);
  launch(alpha);
}}
// ]]>
</script>

Untuk menukar kaler maler warna marna perhatikan code di bawah

var colours=new Array("#f00", "#f60", "#f93", "#fa5", "#fb6", "#fc7", "#fd8", "#fe9", "#ffa", "#ffb", "#ffc");

pada script code di atas berada pada area atas..rasanya anda tahu jugakan tukar warna..

untuk mengawal kelajuan shooting star tu...

var speed=20;  makin kecil angka makin laju..

 untuk kekerapan pula cari code

var how_often=5;  angka 5 tu ialah saat...setiap 5 saat ada shooting star...jangan letak 1 saat nanti blog anda bocor punah musnah...hahhaha

Sumber asal...pusat sumber..hahaha...

sekian