Pubblicato il 14/10/13 - aggiornato il  | 10 commenti :

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 
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
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
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.


10 commenti :

  1. Ciao,
    seguo costantemente il tuo blog e lo trovo FANTASTICO!
    Grazie a te ho imparato tantissimo!!!
    Questo post su Halloween è spaventoso! :D
    Mi chiedo:
    è possibile far apparire casualmente tutti gli effetti speciali e sonori su una determinata pagina statica??
    Grazie Mille
    EYELPIS
    http://eyelpis.blogspot.com/

    RispondiElimina
  2. Ciao,
    seguo costantemente il tuo blog e lo trovo FANTASTICO!
    Grazie a te ho imparato tantissimo!!!
    Questo post su Halloween è spaventoso! :D
    Mi chiedo:
    è possibile far apparire casualmente tutti gli effetti speciali e sonori su una determinata pagina statica??
    Grazie Mille
    EYELPIS

    RispondiElimina
    Risposte
    1. Ti prego di inserire un solo commento e non di raddoppiarlo.
      La risposta alla tua domanda è sì. Devi incollare il codice subito sopra a < /body > aggiungendo questa riga
      <b:if cond='data:blog.url == "URL_PAGINA"'>
      all'inizio e quest'altra riga
      </b:if>
      alla fine.
      Al posto di URL_PAGINA devi inserire l'indirizzo della pagina statica in cui vuoi che si sentano gli effetti sonori. Ricordati di mettere l'URL canonico con il .com al posto del .it
      @#

      Elimina
    2. Grazie Mille Ernesto!!!
      Scusa per il doppio post. Credevo in un errore per via del link che ho inserito :/
      Ho provato a cancellarlo, ma non riesco. (Puoi farlo tu?)
      Ho già provato gli effetti sonori, semplicemente FANTASTICO!
      Adesso devo soltanto tentare sulla pagina statica :D
      Ho provato anche ad inserire nuovi file audio è FUNZIONAAAA!!!!
      Ho dovuto però creare un sito su Google Sites sempre seguendo le tue guide!!!
      Purtroppo ho constatato che caricare i file su dropbox non ha esito positivo.

      Altra domanda:
      è possibile far apparire casualmente tutti gli "effetti visivi" solo in una pagina statica?

      Elimina
    3. Se non ti ha funzionato su DropBox è perché non hai inserito i file nella cartella Public che i nuovi utenti devono crearsi da soli. Puoi mostrare tutti gli effetti in una sola tipologia di pagine (p.e. articoli o anche in una sola pagina statica o un post. Basta applicare i tag condizionali
      http://www.ideepercomputeredinternet.com/2013/03/tag-condizionali-blogger.html
      Per il codice nel modello usi il metodo illustrato nel commento 2.a mentre se il codice lo hai messo in un widget HTML/Javascript i tag condizionali li devi inserire secondo le istruzioni del post che tgi ho incollato
      @#

      Elimina
    4. Ernesto sei un MAGO!!!
      Grazie!!! :P

      Elimina
  3. SALVE ERNESTO UNA DOMANDA
    POTRESTI INSERIRE UN CODICE HTML PER IL PLAYER VLC DA INSERIRLO SU UN SITO PER POTER AVVIARE UN FLUSSO AUDIO?TI RINGRAZIO SE MI RISPONDERAI

    RispondiElimina
    Risposte
    1. Un codice non può essere creato per VLC ma eventualmente per un qualsiasi riproduttore audio video predefinito dell'utente che ci clicca sopra. Onestamente non credo di aver ben compreso la tua domanda però ti linko un post che forse può aiutarti
      https://www.ideepercomputeredinternet.com/2019/04/html5-audio-video-tag-player-dropbox.html
      e qui c'è un video tutorial
      https://youtu.be/d3EqRPYzq38
      @#

      Elimina
  4. Buongiorno, non so se in mezzo a tutti gli altri verrà letto e preso in considerazione questo commento; ad ogni modo la mia esigenza è la seguente:ad un certo punto della configurazione personalizzata che ho fatto di blogger, all'interno del template, ovvero codice html, qualsiasi tipo di modifica ulteriore io tenti di fare, in fase di salvataggio mi viene restituito il seguente messaggio di errore (The widget settings in widget with id PageList2 is not valid. Page title is invalid.) Non trovo modo di risolvere il problema, ed avrei bisogno di una mano. Grazie!

    RispondiElimina
    Risposte
    1. PageList2 è il widget del menù delle Pagine che può essere inserito vicino alla Intestazione oppure in una sidebar. Il fatto che sia PageList2 e non PageList1 significa che hai creato due menù. Ti consiglio di andare su Layout per visualizzare i widget delle Pagine e eventualmente eliminare il doppione.
      @#

      Elimina

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