Skip to main content

Blue mouse sparkles

Did you like my mouse sparkles ? :-)

if yes, just copy the code below and paste it before </head> tag in your code.





The code for blue color is :"00baff", if you want use another color, just change  var colour="#00baff";  in the second row.

Color for;

  • blue: "#00baff";
  • black: "#000000";
  • white: "#FFFFFF"
  • purple: "#a800ff";
  • pink: "#ff00f0";


The code is;

<script type="text/javascript">
// <![CDATA[
var colour="#00baff";
var sparkles=120;

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="2px";
    rlef.style.left="0px";
    rdow.style.top="0px";
    rdow.style.left="2px";
    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>


snazzyspace

I suggest you to read my Engineering articles by clicking here

Enjoy!

By olivercan, Keep Calm Because All is Well!

Popular posts from this blog

Vodafone'da Sms Gönderimi için Bakiyeniz Yetersizdir Sorunu Çözüldü

Vodafone'nun sms gönderimi için bakiyeniz yetersizdir Sorunu Çözüldü!.

How to Hack WhatsApp Account Bluestack

How to hack WhatsApp account??? WhatsApp is currently one of the most secure messaging services purely because it works with a particular phone number and requires a certain code.

Simply Hacking Facebook Account with Kali Linux

Hi guys, today I will show you how to hack a Facebook account with  Kali Linux.

EXCELde Belli Satirlari ya da Sütunları Dondurmak, Sabitlemek

Excel'de önemli gördüğümüz üst satır -başlık- kısmını veya sol sutunu sabit tutmak, her sayfada görünmesini sağlamak artık çok kolay.

Android farkli ekran tipleri icin tasarim yapmak

Birincisi, Layout seçimi çok önemli.
     Yaptığım araştırmalar sonucunda öğrendim ki AbsouluteLayout belki de en kötü seçim. AbsoluteLayout ile öğeler için kesin bir yer belirleyebilirsiniz. Örn: position x=110px, y=180px; Fakat bu kesinlikle önerilmeyen bir durum çünkü farklı ekranlarda veya farklı çözünürlükteki Android cihazlarda kaymalar olduğunu göreceksiniz. 
     Bunun yerine RelativeLayout kullanmanızı tavsiye ederim. RelativeLayout’ta parent-view’e göre ya da diğer elemanlara göre(relatively – bunlarla bağlantılı) bir pozisyon seçileceği için, istediğiniz tasarıma en yakın görünümü elde etmek mümkün. Layout seçimini hallettikten sonra sıradaki işlem olarak farklı ekran tipleri için tasarım yapmaya geldi.

     Farklı ekran tipleri için tasarım yapmak (res/ folder)
     Android dünyasında çok sayıda ve farklı boyut ve çözünürlükte ekran tipi mevcut. Bunların hepsi için ayrı ayrı tasarım yapmak mümkün değil. Temel olarak üç farklı ekran boyutunu referans alıp(small, medium, l…