Pubblicato il 15/12/15 - aggiornato il  | 3 commenti :

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.


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
Si possono scegliere varie tipologie di foglie tra le seguenti:

foglia1 leaf1.gif foglia5 leaf5.gif
foglia2 leaf2.gif foglia6 leaf6.gif
foglia3 leaf3.gif foglia7 leaf7.gif
foglia4 leaf4.gif foglia8 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. 



ANGELI CHE VOLANO NEL SITO


angeli-volteggiano

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


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


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

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


babbo-natale snow1 snow2 snow3
snow4 snow5 snow6 paccodono


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


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.


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

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

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>


3 commenti :

  1. Grazie, farò sicuramente delle modifiche al mio blog

    RispondiElimina
  2. molto carini , ho messo quello della slitta perchè più semplice già ho il blog pieno di gadget meglio non esagerare :D

    RispondiElimina

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