Come inserire effetti speciali nel blog per le Feste di Natale.

Come abbellire il nostro sito su Blogger con effetti speciali natalizi (canzoni, nevicate, oggetti natalizi che cadono, stelle cadenti, slitta di babbo natale, scie colorate del mouse, addobbi vari, festoni, ecc).

Qualche settimana o anche solo qualche giorno prima di Natale alcuni amministratori di blog sono soliti abbellire il loro sito con addobbi natalizi di ogni genere. Come tutti gli anni penso di fare cosa gradita ai lettori presentando alcuni effetti speciali a tale scopo.

Si tratta di cose già pubblicate su questo sito in anni passati ma sono tutte nuovamente controllate visto che da un anno all'altro i siti utilizzati come hosting degli script spesso cessano la loro attività. L'anno scorso capitò a Google Code e dal prossimo anno sarà così anche per Google Drive.

Alcuni di questi effetti possono anche essere inseriti contemporaneamente e per quasi tutti ci sono le demo da visualizzare in alcuni blog di prova che utilizzo.

CANZONI NATALIZIE DA RIPRODURRE NEL BLOG

Si possono riprodurre dei jingle natalizi tutte le volte che si apre una pagina del sito oppure una singola pagina utilizzando i tag condizionali. Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del Sito, si incolla il seguente codice

<script type="text/javascript">
//<![CDATA[
   var styleNode = document.createElement('style');
   styleNode.type = "text/css";
   if(!!(window.attachEvent && !window.opera)) {
     styleNode.styleSheet.cssText = 'audio {width:0px; height:0px;}';
   } else {
     var styleText = document.createTextNode('audio {width:0px; height:0px;}');
     styleNode.appendChild(styleText);
   }
   document.getElementsByTagName('head')[0].appendChild(styleNode);
// Jingle di Natale
var jinglenatale = [
"https://sites.google.com/site/musicafilemp3/natale/1Deckthe.mp3",
"https://sites.google.com/site/musicafilemp3/natale/1HejWDzien.mp3",
"https://sites.google.com/site/musicafilemp3/natale/1XmasTre.mp3",
"https://sites.google.com/site/musicafilemp3/natale/2SilentN.mp3",
"https://sites.google.com/site/musicafilemp3/natale/3Ave.mp3",
"https://sites.google.com/site/musicafilemp3/natale/3FirstNoel.mp3",
"https://sites.google.com/site/musicafilemp3/natale/3Hark.mp3",
"https://sites.google.com/site/musicafilemp3/natale/4Greensl.mp3",
"https://sites.google.com/site/musicafilemp3/natale/DeckTheHallsInD.mp3",
"https://sites.google.com/site/musicafilemp3/natale/Jingle.mp3",
"https://sites.google.com/site/musicafilemp3/natale/pFirstNo.mp3",
"https://sites.google.com/site/musicafilemp3/natale/pJingle.mp3",
"https://sites.google.com/site/musicafilemp3/natale/pUnFlambeauJeannette.mp3",
"https://sites.google.com/site/musicafilemp3/natale/pWeWishY.mp3",
"https://sites.google.com/site/musicafilemp3/natale/SilentNightInA.mp3",
"https://sites.google.com/site/musicafilemp3/natale/tu-scendi-dalle-stelle.mp3",
"https://sites.google.com/site/musicafilemp3/natale/WeWishYouAMerry.mp3"];
var rotazione = Math.random()*jinglenatale.length;
var numero = Math.floor(rotazione);
document.write('<audio controls="true" autoplay="autoplay">');
document.write('<source src='+jinglenatale[numero]+' type="audio/mpeg">');
document.write('</audio>');
//]]>
</script>

Si salva e si posiziona a piacere nella sidebar. Le canzoni sono state caricate su Google Sites. Se si ha un blog con dominio personalizzato i brani vanno caricati su Google Drive o Dropbox. Si possono eliminare canzoni che non ci piacciono oppure aggiungerne altre con la stessa sintassi.

Demo
Clicca qui

CASCATA DI FOGLIE CADENTI

Un effetto classico mutuato da Dynamic Drive è quello della caduta di oggetti. Visto che di neve quest'anno ce n'è poca si può mostrare il sito con delle foglie cadenti. Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e si incolla il codice seguente

<script src="URL di leaf1.js" type="text/javascript"/></script>

Lo script colorato di rosso si ottiene salvando come file .js tamite Notepad++ il

• Codice delle foglie cadenti

Si possono scegliere varie tipologie di foglie tra le seguenti:

	leaf1.gif		leaf5.gif
	leaf2.gif		leaf6.gif
	leaf3.gif		leaf7.gif
	leaf4.gif		leaf8.gif

Il codice di base ha due URL della immagine leaf1.gif. Se ci piace un'altra foglia basta cliccare con il destro del mouse sulla foglia per poi andare su Copia URL immagine e sostituire tale URL nelle due occorrenze presenti nel codice linkato. 

Demo
Clicca qui

ANGELI CHE VOLANO NEL SITO

Per visualizzare degli angeli volteggianti nel sito si va su Layout > Aggiungi un gadget > Base> HTML/Javascript e in Sezioni del sito si incolla questo codice

• Codice degli angeli che volteggiano

L'URL della immagine dell'angelo è colorato di rosso e può essere cambiato anche da una immagine completamente diversa. Gli altri parametri da configurare sono

var numberOfGhosts = 12; /* Numero degli angeli */

var ghostSpeed = 0.9; /* Velocità */

var setTimeOutSpeed = 50; /* Tempo di permanenza */

e l'opacità è settata al 50%. Ho pubblicato anche una demo online

Demo
Clicca qui

SLITTA DI BABBO NATALE

Per mostrare nel blog una immagine che si muove come questa 

si va su Modello > Modifica HTML e, subito prima del tag </body>, e si incolla

<marquee scrolldelay='100' style='position:fixed; top:0; right:0; z-index:1000; width:100%;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxXSgzSU6bDCgSV2Ug9j6Dn99qZLl3xsbcB-G6NXKjHGZwzXrWKevyss8kNODwTXK7pCERJuG0FIZpgviaELt_hbISoRul10oA8dyD5jDBM9qCdhNs0F-E164aFFsQ7uf4Hb_tnC3F4_8/s350/slitta-babbo-natale.gif'/></marquee>

e si salva il modello. C'è anche una demo online

Demo
Clicca qui

CASCATA DI NEVE E DI ALTRI OGGETTI

Utilizzando lo stesso script precedente di Dynamic Drive Snow Effect vediamo come realizzare nevicata da visualizzare nei nostri siti. Si va su Layout > Aggiungi un gadget > HTML/Javascript e, in sezioni del sito, si incolla questo codice

• Codice della nevicata e della caduta di altri oggetti

Per modificare la forma dei fiocchi di neve possiamo sostituire i due URL in rosso delle immagini caricate con quelle di altri oggetti. Basterà cliccare con il destro del mouse sulla immagine seguente che ci piace di più e andare su Copia URL immagine 

Ecco come al solito una dimostrazione di questo effetto con l'immagine del pacco dono

Demo
Clicca qui

ADDOBBI NATALIZI

Quella che vado a illustrare è un effetto complessivo che mostrerà oltre a una nevicata anche dei festoni natalizi e la neve in basso. Ecco come si presenterà il sito

Si va su Modello > Modifica HTML e, sopra alla riga </body>, si incolla

<script type='text/javascript'>
//<![CDATA[
document.write('<img style="position:fixed;z-index:9999;top:0;left:0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHzJCLu-QniBItVIh_CXvkWx9dXXjg0YfMhHYuzlOgmQbYIaRjCAFo7armcXyQyCMy_LQ4UGD1keRglcAEQ1m1hSopi1fCGe2ylPF_4LDeJMW1z1wxfy1p5PllHIEbOoIZCo4ZMa9r4F_D/s150/alto-sinistra.png"/><img style="position:fixed;z-index:9999;top:0;right:0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEAk6M2hBnJ2Y1HUEQ2MTdaxbdvZ_t0kJC9WBwdQS11PWAOIOMCpjkTX4G91-nnRqQS4maUqogcVj87DLKuAlcOAywJhK9jI1h_gb_XSkEPVS8WCCssmZNUFZYGLSy1Z0TXvnq0hx7M75/s150/alto-destra.png"/><div style="position:fixed;z-index:9999;bottom:0;left:0;width:100%;height:104px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjezL3X4J_vaC83VyxpiGoywdqlq3BKyEExGNlW8YRp1KgdSgoTQqTFxJvKuQ5Cu8j2ex-ny4pt1Ju2wOeP5oNb3ns6hMyNQ3_shiYrLuQnMDuunX73INEm2ObYdTY7yjhc-7ZM4hXQXqj2/s640/footer.png) repeat-x bottom left;"></div><img style="position:fixed;z-index:9999;bottom:30px;left:30px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzBU8Fd_7vU8xio1_lUEBOWWB5ZURNEpsqICBdC2__iVHhAWOZN5F6LxO-EaQCPUYLbD6u6idV6HjbHhyphenhyphenHOIfRTE9dO5s6_Vu_RYMMOISRl8_C-jH92zW1eje03HruxKFDoSUgQlIWKfmS/s180/basso-sinistra.png"/>');var no=100;var hidesnowtime=0;var snowdistance='pageheight';var ie4up=(document.all)?1:0;var ns6up=(document.getElementById&&!document.all)?1:0;function festenatale(){return(document.compatMode&&document.compatMode!='BackCompat')?document.documentElement:document.body}var dx,xp,yp;var am,stx,sty;var i,doc_width=800,doc_height=600;if(ns6up){doc_width=self.innerWidth;doc_height=self.innerHeight}else if(ie4up){doc_width=festenatale().clientWidth;doc_height=festenatale().clientHeight}dx=new Array();xp=new Array();yp=new Array();am=new Array();stx=new Array();sty=new Array();for(i=0;i<no;++i){dx[i]=0;xp[i]=Math.random()*(doc_width-50);yp[i]=Math.random()*doc_height;am[i]=Math.random()*20;stx[i]=0.02+Math.random()/10; sty[i]=0.7+Math.random();if(ie4up||ns6up){document.write('<div id="dot'+i+'" style="POSITION:absolute;Z-INDEX:'+i+';VISIBILITY:visible;TOP:15px;LEFT:15px;"><span style="font-size:18px;color:#002F80">*</span><\/div>')}}function snowIE_NS6(){doc_width=ns6up?window.innerWidth-10:festenatale().clientWidth-10;doc_height=(window.innerHeight&&snowdistance=='windowheight')?window.innerHeight:(ie4up&&snowdistance=='windowheight')?festenatale().clientHeight:(ie4up&&!window.opera&&snowdistance=='pageheight')?festenatale().scrollHeight:festenatale().offsetHeight;for(i=0;i<no;++i){yp[i]+=sty[i];if(yp[i]>doc_height-50){xp[i]=Math.random()*(doc_width-am[i]-30);yp[i]=0;stx[i]=0.02+Math.random()/10;sty[i]=0.7+Math.random()}dx[i]+=stx[i];document.getElementById('dot'+i).style.top=yp[i]+'px';document.getElementById('dot'+i).style.left=xp[i]+am[i]*Math.sin(dx[i])+'px'}snowtimer=setTimeout('snowIE_NS6()',10)}function hidesnow(){if(window.snowtimer){clearTimeout(snowtimer)}for(i=0;i<no;i++)document.getElementById('dot'+i).style.visibility='hidden'}if(ie4up||ns6up){snowIE_NS6();if(hidesnowtime>0)setTimeout('hidesnow()',hidesnowtime*1000)}
//]]>
</script>

Le personalizzazioni riguardano i quattro URL delle immagini, il colore della neve che è stato scelto scuro per visualizzarlo anche nei blog bianchi (#002F80) e la forma dei fiocchi ad asterisco *. Infine la dimensione dell'area con gli addobbi è settata in 800x600 pixel.

Demo
Clicca qui

STELLE COMETE CHE CADONO NEL BLOG

Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e si incolla il codice

<script>
if(typeof $pdj=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(typeof $pdj=='undefined'){var $pdj=jQuery.noConflict()}if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['stella-cometa']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBxWc7vV77tkzWJqy7ISqua79My4qjS8X8IbzhuvcMpleyNO4FHLJH3mgrwp-oQh5Mq6Ne_hBsAbso4jc3JJ-lgP4SYEGJuUUQwyvg8LiLy96VcO6hHNm_oyC_gU5LoUCuHlXuVWl_Ccaq/s160/stella-cometa.gif";$pdj(document).ready(function(){var c=$pdj(window).width();var d=$pdj(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(8500,10000),function(){$pdj(this).fadeOut('slow',function(){f(a)})})},e(1,9000))};$pdj('<div></div>').attr('id','stellaDiv').css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=15;i++){var g=$pdj('<img/>').attr('src',image_urls['stella-cometa']).css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('stellaDrop').appendTo('#stellaDiv');f(g);g=null};var h=0;var j=0;$pdj(window).resize(function(){c=$pdj(window).width();d=$pdj(window).height()})});
</script>

Si salva e si posiziona in alto nella sidebar o nella area del post. Ecco la Demo

Demo
Clicca qui

Qui di seguito mostrerò alcuni script tratti dal sito orientale giffy.me che dovranno essere installati con una certa cautela perché ogni tanto danno dei problemi. 

MOUSE CON SCIA DI MOTIVI NATALIZI

Per avere un cursore con questo effetto particolare

si va su Modello > Modifica HTML e, sopra alla riga </body>, si incolla questo codice

<!-- Cursori personalizzati Natale -->
<div style='display:none'><script src='http://blogparts.giffy.me/0035/parts.js' type='text/javascript'/><p style='text-align: center;margin:0;padding:0;'><img alt='christmas-cursor' src='http://blogparts.giffy.me/0035/parts.png' style='border:0;'/></p></div>

Si salva il template. Ecco la solita Demo

Demo
Clicca qui

SLITTA DI BABBO NATALE

Con questa seconda versione della slitta Babbo Natale sfreccia in tutto il blog partendo dal basso a destra fino in alto a sinistra. Si va su Modello > Modifica HTML e subito sopra a </body>, si incolla il codice seguente

<!-- Santa Claus Sleigh -->
<script src='http://blogparts.giffy.me/0017/parts.js' type='text/javascript'></script>
<!-- Santa Claus Sleigh -->

Si salva il template. La Demo si può visualizzare nella stessa pagina della slitta precedente.

OGGETTI NATALIZI CHE PARTONO DAL BASSO

Utilizzando uno script dei fuochi di artificio si possono mostrare dei lanci di oggetti dal basso che esplodono in aria con effetto pirotecnico mostrando oggetti natalizi

Il codice da incollare su Layout > Aggiungi un gadget > Base > HTML/Javascript è

<script type="text/javascript" src="http://blogparts.giffy.me/0001/parts.js"></script>