Pluie d’étoiles sous votre curseur

Voici comment faire tomber des petites étoiles ou plutôt des petites croix, qui se désintègrent au fil de leur descente…

Alors si vous voulez que votre curseur soit animé sur toutes les pages de votre blog, vous devez coller le script ci-dessous entre <body> et </body> sur toutes les pages html…

Je vous conseille de le mettre en bas de page juste avant </body> ça évite de mettre tout ce charabia en plein milieu de votre page, déjà pas mal encombrée par toute sortes de codes ;o)

<script type= »text/javascript »>
var colour= »#00ff00″;
var sparkles=50;
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>

Pour changer la couleur des étoiles, rendez-vous à la deuxième ligne et changer le code couleur :

var colour= »#00ff00« ;

Merci à l’excellent blog  ci -contre http://lestuto2demolite.canalblog.com/archives/2010/12/01/19756583.html