Scia animata del mouse nel blog!


image Ho trovato questo particolare effetto nel blog di Claudia, e ho pensato di parlarne qui per chi cerca qualche abbellimento grafico carino ma non troppo intrusivo o pesante. Inserendolo, quando muoviamo il mouse delle stelline animate cominceranno a cadere dalla punta del cursore verso lo sfondo del monitor, fino a scomparire, con un effetto che può essere visto nel blog di Claudia o nel sito dell'autore.

Il codice HTML va inserito tra i tag <HEAD> e </HEAD> della pagina web. Nel caso di Blogger, da Layout->Modifica HTML, nel codice del template cercate la riga:

<HEAD>

e subito sotto incollate questo codice (se vi viene più comodo, potete anche prelevarlo dalla pagina del sito dell'autore che ho linkato):

<script type="text/javascript">
// <![CDATA[
var colour="#f0f";
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>

Modificando il valore segnato in verde:

var colour="#f0f";

potrete cambiare il colore delle stelline, secondo la codifica RGB dei colori.

Dalla pagina principale del sito dell'autore potrete scaricare molti altri effetti grafici per il blog. E se preferite, invece delle stelline potrete visualizzare un orologio analogico o digitale. L'unico effetto collaterale, come sempre quando aggiungiamo una porzione di codice HTML al template, è che vedrete la scia animata anche in Layout->Elementi pagina.

Condividi su Facebook, Twitter o Google Buzz:
Condividi su Facebook Condividi su Twitter Pubblica su Google Buzz

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:
oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!

47 commenti:

Claudio Pomhey ha detto...

ah questa non te la appoggio, veramente irritante! è un parere personale ovviamente

Tenebrae ha detto...

la faccia di gigi d'alessio nel mio blog, quello è irritante... via coi filtri adsense!

a parte questo, dipende dal blog, anche su Creare blog non ci starebbe, su un blog personale è un'idea carina... ogni cosa ha il suo contesto, e ovviamente qui cerco di coprirli tutti ;)

Maurizio ha detto...

Appesantisce il caricamento della pagina? Ho già dovuto eliminare animazioni flash e gif animate...
A presto

Tenebrae ha detto...

@maurizio: no, è molto leggero

lamagagiò ha detto...

Ciao Tenebrae, so ke ti kiedo una cosa ke avrai spiegato milioni di volte ma, ti prego...
Volevo provare a inserire sul blog le stelline animate, ho copiato da te il codice, sono andata da Layout - modifica html - e lì mi è apparsa la richiesta di eseguire il backup e mi chiede di scaricare il modello completo (devo cliccare su?) poi mi dice di caricare un file dal mio disco rigido e credo di averlo fatto...ma il del mio blog che avrei salvato, compare solo una sfilza di codici? Se riesci a rispondermi, domani ci riproverò. Grazie infinite.

Susina strega del tè ha detto...

Ciao! Sono Susy! Ho appena fatto come mi hai detto tu, niente di più facile ma di stelline neanche l'ombra, come mai??

Susina strega del tè ha detto...

Rettifica!!! Si vedono!!! Sono leggerissime e molto rade...
Sei un mito d'utilità!!!! ^_^

elena71 ha detto...

Ciao Orazio,
ho un sito che uso da un sacco di tempo e non mi ha dato mai problemi, ben fatto e abbastanza intuitivo anche se in inglese.

Si possono trovare diversi effetti per il mouse oltre ad una quantità illimitata di risorse e utility davvero interessanti.

:)

elena71 ha detto...

http://www.dynamicdrive.com/dynamicindex13/index.html


no comment :D

ilaria ha detto...

Sei un genioooooooooooo!!!!!!!!smackkkkkkk!!!!!

Anonimo ha detto...

Ciao senti potresti fare un articolo pure su come accentrare tutti gli elementi di una colonna e su come colorare un'intera colonna di colore diverso?

Alidiluna ha detto...

il mio blog ora è pieno di stelle...grazieeeeeee

profeta ha detto...

niente stelline!!!!!!!!!

ilaria ha detto...

L'ho fatto..e' bellissimo grazie posti sempre belle cose;)

Claudia ha detto...

Io lo adoro questo effetto!!! grazie di aver nominato il mio blog :-) a prestissimo!!!!!!

Claudia ha detto...

però ho notato una cosa io tutto il codice ce l'ho incollato sopra la riga < /head> e funziona...

RED ha detto...

grazie Tenebrae, provato ed inserito nel blog ... davvero carino! ciaoooo

DARKinside ha detto...

grazie anche per questo tenebrae...mmmh però, rosa??? vabbè da un effetto molto particolare per quello lo lascio ma le stelline rosa nun me garbano molto! ahahahah gusto maschile che ce vuoi fà...

Claudia ha detto...

ma puoi cambiare colore :-)))) inserendo 000000 in quella variabile selezionata da tenebrae ti escono nere.. per altri colori leggi quel post dedicato appunti ai colori... :-)

Anonimo ha detto...

ciao tenebrae come faccio a mettere un border solid in #footer se non ce l'ho, vorrei mettere la linea di separazione nell'intera colonna dove ci sono i post ma sul mio template #footer non ce l'ho, sulla colonna ci riesco perché c'è #sidebar-wrapper ma per il footer non ci riesco, fammi sapere ciao e grazie

Michele Lan ha detto...

Un bel aggiornamento di pagerank è in corso...

DARKinside ha detto...

ops avevi ragione grazie mille claudia!! ciauuu

vicio ha detto...

bellissimo però volevò dire che su quel sito (grazie per il link)ho trovato anche il codice per i fuochi d' artificio che sono troppo forti ciao

Kikka.... ha detto...

olà tenebrae sono qui nuovamente per dirti "grazie"... I tuoi post sono sempre molto utili e in questi 2 gg sono riuscita a mettere l'effetto stelline del mio blog e ancora di più una foto come sfondo al blog. Sei fantastico!

Mi chiamo Forrest... ha detto...

Ueh, Tenebrae, dove sei finito? Stai male? Ti serve un medico ? ;-).

Ti ho mandato qualche mail, ma non ho ricevuto risposta. Spero tu stia bene...

Ciao

Tenebrae ha detto...

eccomi ragazzi, scusate ma sono stato impegnato altrove.. anche stasera, sto per uscire... ho visto la lunga lista di mail e commenti, tranquilli che la risposta arriverà per tutti :)

Den ha detto...

E' possibile far ricevere ai visitatori, nelle newsletter (grazie al feed) solamente l'indirizzo del post, senza nome dell'articolo e prime frasi?

Crème Brulée ha detto...

Fantastico! quello che cercavo!

Anonimo ha detto...

ciao, nn riesco a metterlo!potresti spiegarmi passo passo come metterlo su un blog di msn??scs ma nn ci kapisco nulla di internet!Please,grazie in anticipo!

mary47 ha detto...

Ciao, ho seguito passo passo le tue indicazioni, su blogger, layaut, modifica html, appena sotto head, ho incollato il codice, ma nulla. Sbaglio forse qualche passaggio? Scusami, ma mi piaceva molto l'effetto stelline!
Ti ringrazio

mary47 ha detto...

Ci sono riuscita!!! Grazie.....
Ora sul mio blog nevica e c'è una pioggia di stelline!!
Grazie mille

silvia ha detto...

Ciao, avrei un problemino, avevo inserito le stelline al puntatore e andava tutto bene avevo perfino cambiato colore... poi ho inserito la neve e ora non si vedono + le stelline... e mi piacevano tanto... Grazie fin d'ora x l'aiuto...

silvia ha detto...

volevo aggiungere ke ho inserito la neve al punto 2 del post del 4 dicembre... e credo ke sia proprio quell'effetto ke non fa funzionare la scia del mouse xkè con gli altri effetti neve funziona.... attendo ansiosamente notizie... Grazie mille

Il Profeta Elia ha detto...

la scia è sparita!!!!!!!!!

Splashboom ha detto...

La scia è sparita anche a me. Però io avevo sia la neve che la scia, ed insieme funzionavano benissimo. Però io ho fatto anche delle modifiche successive nel codice del template, può darsi che siano state quelle a farmi sparire l'effetto.

Anonimo ha detto...

mi sapete dare un sito dove posso scaricare la scia di stelle?
Grazie.

susina ha detto...

ciao!!!!!!!scusate ma nn ci ho capito nulla...potete spiegarmi passo passo come faccio a mettere le stelline nel blog? grzie in anticipo...(dove sta layout modifica html?)

Tenebrae ha detto...

@susina: quando parlo di layout->modifica html mi riferisco ai blog su blogger

Nidawi ha detto...

Bellissimo! Grazie 100000000 :)

Due Penny ha detto...

Stiamo abbellendo il nostro blog grazie ai tuoi suggerimenti, ovviamente non si può mettere tutto, ma queste stelline sono proprio un amore!!!!

Anonimo ha detto...

ma in windows live spaces dove bisogna inserire il codice?

Tenebrae ha detto...

@anonimo: mi dispiace, mai provato su windows live spaces, non saprei come fare

Il folletto paciugo ha detto...

Ciao qualche settimana fa sono passata ed ho prelevato le stelline in scia ma non ti avevo lasciato messaggio...scusami tanto.
Ho modificato il colore e sono una meraviglia....grazie ancora a presto ....ciao Roberta

Barbara ha detto...

ma xche' io nn riesco?? Ho copiato il codice e l'ho inseritosotto head togliendo la scritta precedente e mi da' errore...mi dice che il mio modello non e' strutturato correttamente... http://clp8uq.bay.livefilestore.com/y1puzZi-RD7bYXIhtPKsBTO5ycobIqqg2uBLw218VEDx7HSRMGL525vQen-DGLd_FF2h1MyDmnlrYWVCck_8H4_Xw/2.gif
che tristezza cosa sbaglio??
Se lascio la scritta precedente insieme a questo cosice lo salva ma non compaiono le stelline... xchè???????

"Riderenonsolo" ha detto...

Bello l'effetto stelline, proverò ad usarlo per il mio blog. Grazie.

Cristallo ha detto...

Grazieeee! Sono troppo carine!

Lorella Emo ha detto...

Salve, trovo i tuoi articoli interessanti e chiari. Posso sapere come inserire nel mio blog un'immagine grande quanto l'intera videata? Che non venga ripetuta più volte? Ho provato con un'immagine 1600 X 900 ma anche con quella la ritrovo ripetuta, sbaglio nell'impostarla? Ho visto il link al blog di Claudia, che suggerivi tu riguardo al mouse animato e ti dirò che è proprio quello l'effetto sfondo che vorrei dare. Puoi suggerirmi come fare? Grazie infintite


Prima di lasciare un commento, leggete qui

Posta un commento