Fantastici Effetti speciali da inserire nel blog per Halloween.

7 bellissimi effetti da mettere nel blog per la Festa di Halloween: fantasmi in dissolvenza, fantasmi animati, zucche intagliate, fiamme animate, sangue grondante, suoni agghiaccianti e pipistrelli svolazzanti.

Halloween è una festività sviluppatasi principalmente negli USA che trae origine da tradizioni celtiche e anglosassoni. La festa si svolge la notte del 31 Ottobre con diverse modalità. Si va dai bambini che girano le case del vicinato chiedendo dolcetto o scherzetto (traduzione dell'inglese trick or treat) alle sfilate in costume dei più adulti. L'elemento comune delle celebrazioni di Halloween è la simbologia legata all'occulto. Si tratta di una festa a metà tra il religioso e il profano dove sono mescolati il culto dei defunti in concomitanza con la festa cristiana di Ognissanti e le zucche intagliate con forme macabre in puro stile horror.

Halloween ha attecchito anche in Italia e la notte del 31 Ottobre vengono organizzate feste a tema mentre i bambini si vestono con gli abiti dei loro mostri preferiti. Anche nel mondo del blogging Halloween è riuscita a piazzarsi rapidamente ai primissimi posti degli eventi festaioli subito dopo feste storiche come Natale, Pasqua, Carnevale e Capodanno ma prima di San Valentino e Ferragosto.

In questi 5 anni di attività del sito ho proposto diversi effetti speciali per addobbare il blog in occasione della festa di Halloweeen. Penso di fare cosa gradita se li ripropongo riveduti, corretti e esemplificati. Possono anche essere installati due o più effetti contemporaneamente. Ricordo una volta per tutte che bisogna sempre salvare il template prima di procedere alla sua modifica.

SUONI RACCAPRICCIANTI

L'effetto farà in modo di riprodurre un suono pauroso quando qualcuno aprirà una pagina del vostro blog. Ho scelto in rete 21 suoni di questo genere in formato MP3 che non avessero vincoli di copyright, li ho inseriti in un archivio ZIP e in un archivio RAR e poi li ho caricati su Dropbox 

• Scarica Archivio RAR dei suoni di Halloween
• Scarica Archivio ZIP dei suoni di Halloween

Questi file potranno essere aperti usando il programma gratuito 7-Zip. Per l'installazione andate su Modello > Modifica HTML e cercate la riga </body> quindi subito sopra incollate questo codice

<script type='text/javascript'>
//<![CDATA[
// Suoni di Halloween
var halloween = [
"https://sites.google.com/site/musicafilemp3/halloween/bach1.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/bambina1.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/campane1.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/fantasma1.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/fantasma2.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/grido1.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/grido2.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/mostro.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/risate1.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/risate2.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/risa-ululato.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/ululato1.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/ululato2.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/battitocuore.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/bestia.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/cobra.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/dolore.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/risatasatanica1.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/risatasatanica2.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/spari.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/tuono.mp3",
];
var rotazione = Math.random()*halloween.length;
var numero = Math.floor(rotazione);
document.write('<iframe style="width:0;height:0;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/google-audio.xml&up_MP3='+halloween[numero]+'&up_START=Yes" allowTransparency="true" frameborder="0" scrolling="no"></iframe>');
//]]>
</script>

Salvate il modello.

Dopo aver effettuato l'accesso alla pagina di demo sentirete un suono casuale tra quelli inseriti. Rinfrescando la pagina pigiando su F5 ne sentirete uno diverso e così via. Possono essere mantenuti solo i suoni che ci piacciono e eliminare gli altri. Gli MP3 sono stati caricati su Google Sites e funzioneranno solo se si ha un blog gratuito del tipo nome.blogspot.com. Se possediamo un sito con dominio personalizzato i file MP3 dovranno essere caricati nella cartella Public di Dropbox per poi acquisirne il link diretto degli audio da sostituire nel codice precedente.

SANGUE E FIAMME IN ALTO E IN BASSO

Se volete visualizzare nella parte bassa del blog una immagine come questa

non dovete fare altro che incollare questo codice

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKEZIosO5z097WglxmMlXCXoYSk7UoXIJReoIyacV4zaxarrKbgNSTll0siSgkeePpu-5XIRv6lUEGqj_8Qx5EjNT3xOSAUuifHLC7tzSqRzHx5PCiOtoCUruo-w1hjRKPy90RVqMpK2E/s338/fiamme.gif' style='position:fixed; bottom:0; left:0; width:100%; height:100px;'/>

subito sopra alla riga </body> andando su Modello > Modifica HTML. Invece per visualizzare nella parte alta del blog una immagine di sangue come questa

il codice da incollare sempre sopra a </body> sarà il seguente

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEPvpGuTTAP8f0jJIDDJv0RHLZg1K7gkRaDDfqvH_8kOvVxO8uNT3PSbPcA3iQ_NTw2l0GsNPe3evhm_7ctn4os9Qg1TQ_vxC04V9-qaDhK4Upanu2YyBKnnCnXDCSpqNM0xGRUodH1l4/s860/sangue.gif' style='position:fixed; top:0; left:0; width:100%; height:150px;'/>

In entrambi i casi dovrà evidentemente essere salvato il modello.

FANTASMI ANIMATI NEL BLOG

Questo è un bellissimo effetto che mostra i fantasmi animati con effetto trasparenza che vanno verso lo schermo. È facilmente installabile e personalizzabile

Per l'installazione si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla in Sezioni del sito il codice sottostante per poi salvare e posizionare con il mouse in un'area centrale

• Codice dell'Effetto Fantasmi

La configurazione dell'effetto si fa editando questa parte del codice

//Configurazione Effetto Fantasmi 
var numberOfGhosts = 10; /* Numero dei fantasmi */ 
var ghostSpeed = 0.9; /* Velocità */ 
var inTheFace = 5;
var setTimeOutSpeed = 50; /* Tempo di permanenza */

per personalizzare il numero dei fantasmi, la loro velocità e il tempo di visibilità

PIPISTRELLI VOLANTI

Per visualizzare quattro pipistrelli neri che svolazzano nel nostro sito si va su Modello > Modifica HTML e si cerca la riga </head> per poi incollare subito sopra questo codice

• Codice dei pipistrelli di Halloween

Si cerca quindi la riga </body> e subito sopra si incolla questo nuovo codice

<!-- Pipistrelli volanti Inizio -->
<div id='pipistrello1' style='position:absolute; z-index:60; left: -500px; width:125px; height:108px;'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCPDaiEN8R4cpucDVeJmMaldWCtXQC1Jd3FvwSv3XXl8swdICe73Gwt14uhLofsKndVCBT7C8VDLXee4YIBOvI6nbkwNe1VE3qat6XuJLK31MLa619-TRfrQTSyJ-D9Tg0XQ7NNobKuLY/s125/pipistrello1.gif'/></div>
<div id='pipistrello2' style='position:absolute; z-index:61; left: -600px; width:120px; height:99px;'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiREeXNlf3_5xX62kd2vNLgQSnKtM1QZKUp-5-EVw8SwlttCC8Hhahaj7ul6YdCZR6KBfqcyPJyFlzNX7SBAUN9lG0RkugQRYllFFG-x0dHzqhB9VbQAAM-jpDqbS5Lr3xDPMgXfNX9DFw/s120/pipistrello2.gif'/></div>
<div id='pipistrello3' style='position:absolute; z-index:62; left: -700px; width:160px; height:120px;'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-fYXapDbmDZBGgbcpyv-MdtYXMt_lqGD9QIDcofvGeG7RUaaIKISXAD4yfoObzwMORqtloYWWrWoDjYEqnLYb1mLVDSDC4UQO_Jig3ZoW2TWz9reSytReDr3bVQwcZTtsFfFISTHUefo/s160/pipistrello3.gif'/></div>
<div id='pipistrello4' style='position:absolute; z-index:63; left: -800px; width:106px; height:85px;'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0TSlsyVVP8_GwTipWt3tbYfti7XLzfikQXZSm-ttskP-YUKbR1ZeSKRJbIa2z4AWoYJ4uyHPyQXDHMbzYg-4gU_Q6Rgf-BYxDkV7HJy7wBHHA-6xcFsJhWF8osteJlwYaKY74eYqvr24/s106/pipistrello4.gif'/></div>
<!-- Pipistrelli volanti Fine - http://www.ideepercomputeredinternet.com  -->

Si salva il modello.

ALTRI FANTASMI ANIMATI PER IL BLOG

Per visualizzare tutta una serie di cloni di questi due fantasmi che svolazzano nel sito dobbiamo andare su Modello > Modifica HTML e cercare la riga </head> quindi subito sopra incollare questo codice

<!-- 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuBbjjw003-5nJq-rWFOmICYFZ40_snAAPqVtxcOZni8reiyekWFn1qRyF5C4OY0Zy9VXXU-Mu0AC5xzAamZUXqu2b7oZajLjgjiKRJJxPqC92BEhGCrJH9QzHK8M6vjJETxhf70pmzT7b/s156/ghost2b.gif",28,25);
newObject("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg55LoN_NUUN7fxKeKpSA8RB4hFblEGOx9gw6V5iOY-Dm6RRC8fhNFSQ_6yTtAR_ve25-xcJgmgbspuU_Ra-FTA1LX3hloSVF-bEkUSwuM58WLzrNiYYXMrbfMgzAGnVujcRAwHhWS-3Tyg/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. I parametri in rosso da personalizzare rappresentano il numero di fantasmi, le oscillazioni laterali, la velocità di caduta e l'intensità del vento. Numeri positivi in wind spostano la caduta sulla destra e numeri negativi sulla sinistra.

ZUCCHE INTAGLIATE ANIMATE

Come detto all'inizio del post le zucche intagliate in stile horror sono forse l'immagine più rappresentativa di Halloween. Ho usato lo stesso codice precedente ma ben 5 zucche invece di due soli fantasmi. Anche in questo caso si va su Modello > Modifica HTML e si cerca la riga </head>. Subito sopra si incolla questo codice

<!-- 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj09TbgU1-lYOvEHvhCX-iYcBoZbJJ_YUPR4Vqqj-PEXeff1xXZAwTCrIWlWxag_ct12eLUfsMfPbUVyRfWgMpNBcnJ4ai7r8GVk2GAEy2KeGpQ8zeJN3SQlxIeojV3Et4iHY0qOWXVgNMS/s153/zuccahalw1.gif",29,15);
newObject("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1UNrRdjqDL1_F6NZWveNnckHuv-csgIv_uWfA8tAQXXFN4KGMEr5rCtYPzGysw_j2OIkXCM3YiDLYjfou55UNCAggyoITPxVQIP1XRifZSfXw_L17ItLYD12AYRwysQQrkP40rsOCqXfL/s84/zuccahlw6.gif",27,23);
newObject("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsDAmLkMf2DSiAAdC_VZd2qMgVrMCbQjHNuO2nAeoTiPY4dLCRq8Efff7Iu91nsyeeAyQGz4xAbKVqcGjIg5UpWMHRMpdY60KdJT9S1__T3JLBNKl1iFT0ufbS63HU0rRSmpFRhqVfvQ_V/s128/zuccahlw4.gif",46,20);
newObject("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0LJpRRS9CGU9aoRGBr45FHIeKlexKgNQ86pg5WwLuz538U21tNXVoHO8w94C_BDp4cqPDgnXNIc4dUq6GaJ8CsfGCvbWAc_UHQrH76GuBXMGQskUJ9emOHuFJI86tJT8cPsGvQvvEW7nd/s76/zuccahalw7.gif",40,28);
newObject("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw6OPw1O-kJfR9X29E5Qp0BiMMGq5eO2k3NDco9lyKwdeG1Ch62tNj-depH52cncjUaHLHXfXg7jUWsmzS8h_twZ4dGdjvLavwARkV-Cqc_3tF26U0UK0oKCkTapqXAjRKHfapeHjQrEKE/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.

Si possono personalizzare i parametri colorati di rosso che configurano il numero di zucche da visualizzare contemporaneamente, l'ampiezza delle oscillazioni laterali durante la caduta, la velocità di caduta e la direzione e intensità del vento ricordando che in questo ultimo parametro numeri positivi sposteranno la caduta sulla destra mentre numeri negativi la sposteranno sulla sinistra.