8 ottobre 2012

Fantasmi animati da inserire nel blog per Halloween.

Mancano ancora tre settimane prima di arrivare alla festività di Halloween che pur non facendo parte della nostra cultura ha ormai preso decisamente campo anche nel nostro paese.

Come mio solito in occasione delle feste più importanti pubblico delle proposte per abbellire il blog. E' sempre piuttosto difficile trovare qualcosa di originale che non sia stata già presentata negli anni scorsi. Ho pensato a dei fantasmi animati che svolazzano nel blog. Per questo effetto ho usato uno script di MaxxBlade in cui si possono inserire anche 5 oggetti che cadono. Ho però trovato solo due immagini in GIF che si prestavano ottimamente per questo effetto. Se ne possono però aggiungere altre come illustrato alla fine dell'articolo.

                       fantasma-animato              fantasma-animato-eretto
Dopo aver salvato il template si va su Modello > Modifica HTML > Procedi e si cerca la riga </head> . Subito sopra si incolla il codice seguente

<!-- Fantasmi per Halloween Inizio -->
<script>
//<![CDATA[
// Fall v2.0 By MaxxBlade - http://www.maxxblade.co.uk/fall
var fallObjects=new Array();function newObject(url,height,width){fallObjects[fallObjects.length]=new Array(url,height,width);}
var numObjs=10, waft=100, fallSpeed=6, wind=0;
newObject("https://lh3.googleusercontent.com/-W47vfPgEw0c/UHKV7ozekFI/AAAAAAAAbFo/XuGMoQmhvBw/s156/ghost2b.gif",28,25);
newObject("https://lh5.googleusercontent.com/-nrKzF-U5mII/UHKWFpC4l-I/AAAAAAAAbF0/hhWAj6lmdXI/s118/ghost2.gif",21,21);
function winSize(){winWidth=(moz)?window.innerWidth:document.body.clientWidth;winHeight=(moz)?window.innerHeight:document.body.clientHeight;}
function fallObject(num,vari,nu){
objects[num]=new Array(parseInt(Math.random()*(winWidth-waft)),-30,(parseInt(Math.random()*waft))*((Math.random()>0.5)?1:-1),0.02+Math.random()/20,0,1+parseInt(Math.random()*fallSpeed),vari,fallObjects[vari][1],fallObjects[vari][2]);
if(nu==1){document.write('<img id="fO'+i+'" style="position:absolute;z-index:99;background:none;border:0;padding:0;box-shadow:none;" src="'+fallObjects[vari][0]+'">'); }
}
function fall(){
for(i=0;i<numObjs;i++){
var fallingObject=document.getElementById('fO'+i);
if((objects[i][1]>(winHeight-(objects[i][5]+objects[i][7])))||(objects[i][0]>(winWidth-(objects[i][2]+objects[i][8])))){fallObject(i,objects[i][6],0);}
objects[i][0]+=wind;objects[i][1]+=objects[i][5];objects[i][4]+=objects[i][3];
with(fallingObject.style){ top=objects[i][1]+winOffset+"px";left=objects[i][0]+(objects[i][2]*Math.cos(objects[i][4]))+"px";}
}
setTimeout("fall()",31);
}
var objects=new Array(),winOffset=0,winHeight,winWidth,togvis,moz=(document.getElementById&&!document.all)?1:0;winSize();
for (i=0;i<numObjs;i++){fallObject(i,parseInt(Math.random()*fallObjects.length),1);}
window.onresize=winSize;fall();
//]]>
</script>
<!-- Fantasmi per Halloween Fine -->

Si salva il modello. Ho postato in rete la solita demo



I parametri colorati possono essere modificati con questo significato:
  1. Si possono aggiungere altre righe newObject("URL.gif",28,25); per inserire altre GIF animate
  2. numObjs=10, sono il numero di immagini visualizzate contemporaneamente
  3. waft=100, sono il numero di pixel dei movimenti laterali durante la caduta
  4. fallSpeed=6, è la velocità di caduta
  5. wind=0 è la direzione del vento. Questo è un parametro importante per ottimizzare l'effetto in funzione del modello in cui è stato inserito. Con vento 0 i fantasmi cadono verticalmente. Se si mette un numero negativo (es: -2) cadranno a sinistra, se invece si mette un numero positivo (es: 1) cadranno verso destra. Si può settare il numero a seconda delle esigenze.
Ricordo altre personalizzazioni che ho in passato presentato per la festa di Halloween
Questo effetto può essere inserito anche in blog su piattaforme diverse da Blogger.


8 commenti:

  1. Un po' rompiscatole questi fantasmini si posano ovunque.

    RispondiElimina
  2. Ho ancora in mente lo scorso Halloween. Era la prima volta che visitavo il tuo sito e sono stata accolta da un urlo agghiacciante.

    RispondiElimina
  3. Interessante... in questo blog ci sono molte idee utili e/o interessanti.

    RispondiElimina
  4. carini i fantasmini!! mi piacerebbero delle piccole zucche .....sai come potrei fare? grazie !! ciao :)

    RispondiElimina
  5. @nanussa+-+-
    E' semplicissimo. Basta che tu trova 2,3,4 o 5 immagini di zucche, le carichi su Picasa e ne acquisisci l'URL diretto poi lo sostituisci a quello del codice come è scritto nell'articolo

    RispondiElimina
    Risposte
    1. ok grazie, mi copio subito il codice :) buona giornata :)

      Elimina
  6. [commento OT] Esiste una soluzione funzionale per poter effettuare trackback da blogger? [Ma che cavolo! Come hanno potuto tralasciare un dettaglio del genere?] - giulia

    RispondiElimina
    Risposte
    1. @giuliasciannella
      Esistono quelli che si chiamavano Link a Ritroso
      http://www.ideepercomputeredinternet.com/2009/12/come-visualizzare-i-backlink-o-link.html
      adesso però non so se con la nuova Bacheca ci siano ancora e comunque funzionavano male e non davano notifiche di backlink ricevuti se non visualizzandoli sotto il post.

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.