Pubblicato il 09/10/12e aggiornato il

Zucche animate da mettere nel blog per Halloween.

Come inserire immagini animate di zucche nel blog per la festività di Halloween.
Dopo aver letto un commento sull'effetto dei Fantasmi di Halloween ho pensato di presentare un nuovo widget per inserire una serie di zucche animate che si librano nel blog. E' tradizione che per Halloween vengano intagliate delle zucche a forma di volto con l'inserimento di una candela o comunque di una sorgente luminosa al loro interno. 

Ai fiorentini fa venire in mente sia pure lontanamente la Festa della Rificolona che si svolgeva il 7 Settembre anche con un evento fluviale e che adesso si cerca di riportare agli antichi splendori. Tornando alle nostre zucche, ho semplicemente sostituito i loro URL a quelli dei fantasmi nello script precedente.

Si va su Modello > Modifica HTML > Procedi e si cerca la riga </head>. Subito sopra a questa si incolla il seguente codice javascript

<!-- Zucche Animate per Halloween Inizio -->
<script>
//<![CDATA[
var zucche=new Array();function newObject(url,height,width){zucche[zucche.length]=new Array(url,height,width);}
var numObjs=10, waft=110, fallSpeed=4, wind=0;
newObject("https://lh3.googleusercontent.com/--cFBguon4Ys/UHQg0IECioI/AAAAAAAAbGI/UYG28ubkX4A/s153/zuccahalw1.gif",29,15);
newObject("https://lh3.googleusercontent.com/-SiKShtRpBeQ/UHQjdyMLCgI/AAAAAAAAbG0/RMkvUCekogY/s84/zuccahlw6.gif",27,23);
newObject("https://lh3.googleusercontent.com/-IFH4scxGiqI/UHQg9eLtc-I/AAAAAAAAbGg/hwHRuEGYFlI/s128/zuccahlw4.gif",46,20);
newObject("https://lh3.googleusercontent.com/-iBk2VdQLhWM/UHQlAIcG0FI/AAAAAAAAbG8/B1FyByGd4gA/s76/zuccahalw7.gif",40,28);
newObject("https://lh6.googleusercontent.com/-FHG9YRkryYE/UHQhAZt83SI/AAAAAAAAbGo/ZT5clQ7WCwg/s94/zuccahlw5.gif",36,33);
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,zucche[vari][1],zucche[vari][2]);
if(nu==1){document.write('<img id="fO'+i+'" style="position:absolute;z-index:999;background:none;border:0;padding:0;box-shadow:none;" src="'+zucche[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()*zucche.length),1);}
window.onresize=winSize;fall();
//]]>
</script>
<!-- Zucche Animate per Halloween Fine -->

Si salva il modello. Gli URL delle immagini animate sono stati evidenziati di rosso e possono essere sostituiti da quelli di altre immagini anche in PNG.



Le altre personalizzazioni riguardano i seguenti parametri:
  1. var numObjs=10, numero di zucche da visualizzare contemporaneamente
  2. waft=110, valore in pixel delle oscillazioni laterali durante la caduta
  3. fallSpeed=4, velocità di caduta
  4. wind=0 rappresenta l'intensità del vento. Numeri positivi fanno cadere le zucche sulla destra mentre numeri negativi le faranno cadere sulla sinistra.




1 commento :

  1. che belle!!! grazie !! inseriro' queste zucche nei prossimi giorni!! grazie!!!

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.