1 commento

TUTORIAL SITI WEB: Cursore del mouse con “scia di stelline” nel proprio sito.

Gli argomenti dei miei tutorial scaturiscono solitamente dalle mail di richiesta d’aiuto che ricevo ogni giorno.

Questa sera voglio parlarvi di una particolare “funzione” per i siti (e per tutti quei blog in cui sia permessa la modifica del codice HTML e che, nel contempo, siano in grado di leggere i codici javascript) che vi permetterà con la semplice aggiunta di un blocco di codice al vostro codice HTML di ottenere una scia di stelle al seguito del vostro cursore mouse.

Clicca per vedere l’anteprima

QUAL E’ IL CODICE?

Il codice va inserito subito prima della chiusura del tag “Body” (in pratica prima della stringa </body>) ed è il seguente:

<script type="text/javascript"> 
// <![CDATA[ 
var colour="#ffffff"; 
var sparkles=50;
/**************************** 
*  Tinkerbell Magic Sparkle * 
* (c) 2005 mf2fm web-design * 
*  http://www.mf2fm.com/rv  * 
* DON'T EDIT BELOW THIS BOX * 
****************************/ 
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>

VARIAZIONI AL CODICE:

Le parti in rosso sono quelle che possono essere variate per ottenere un effetto diverso:

1) var colour=”#ffffff“: è la stringa che identifica il colore della scia di stelle. Usa la tavolozza dei colori per individuare il codice della tonalità prescelta.

2) var sparkles=50: è la stringa che identifica il numero di “stelline” al seguito del cursore.

About these ads

Un commento su “TUTORIAL SITI WEB: Cursore del mouse con “scia di stelline” nel proprio sito.

  1. Scusami io ho provato a metterlo ma non mi funziona :(

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

Iscriviti

Ricevi al tuo indirizzo email tutti i nuovi post del sito.

Unisciti agli altri 74 follower

%d blogger cliccano Mi Piace per questo: