Come aggiungere effetti speciali al blog per Carnevale.

Come installare nei blog di Blogger e di Wordpress degli effetti speciali per Carnevale quali scie e cascate di coriandoli animati e scie di fiori in formato GIF.

Siamo già entrati nel clima Carnevale dal Giovedì grasso di due giorni fa e anzi in talune città dove il Carnevale è particolarmente sentito la festa è già iniziato da qualche settimana. Sono quindi un po' in ritardo con questi abbellimenti specifici per il Carnevale.

Infatti in occasione delle principali festività è mia abitudine pubblicare dei post con gli effetti speciali da aggiungere al nostro sito per adattarlo al clima della festa. L'ho già fatto per le Feste di San Valentino, di Halloween, di Natale e di Pasqua. 

Il Carnevale in Italia è associato principalmente alle Città di Venezia e di Viareggio ma ci sono anche centri minori che hanno delle manifestazioni veramente di rilievo in occasione del Carnevale.

La simbologia classica del Carnevale è costituita da coriandoli, maschere, carri allegorici. Quando il Carnevale cade nel mese di Marzo, non è il caso di quest'anno ma ci manca poco, si può associare il Carnevale anche alla Primavera prossima ventura. Seguendo questa falsariga passo quindi a presentare degli effetti da installare nel blog che riguardano cascate e scie di coriandoli e scie di fiori animati.

Gli utenti dei blog su Blogger dovranno incollare i codici su Layout -> Aggiungi un gadget -> Base -> HTML/Javascript mentre chi usa Wordpress i codici li dovrà incollare su Aspetto -> Widget -> Testo.

La riproposizione di questi effetti è anche dovuta alla interruzione del servizio di Hosting da parte di Google Drive che ha reso i precedenti codici non funzionanti.

CASCATA DI CORIANDOLI MULTICOLORI E ANIMATI

Il codice da incollare con le modalità illustrate sopra è il seguente

<script type='text/javascript'>
  var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTmL6TUX_MoO8pHiytAOn5t4QAinxdHdNvxl9hxFyK_jxp7HRkcUJXnVdP4yrKVOXutuy-qfdEGh3ghNHiCIfKRntSdgITR4Dt0T26Ec-hvPZWSqL8fsye6N3dtnX_Me28YLLcU0rsfXM/s18/coriandoli.gif" 
  var no = 25;
  // Configure confettis should disappear after x seconds (0=never):
  var hidesnowtime = 0;
  // Configure how much confettisshould drop down before fading ("windowheight" or "pageheight")
  var snowdistance = "pageheight";
  var ie4up = (document.all) ? 1 : 0;
  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
  var dx, xp, yp;    // coordinate and position variables
  var am, stx, sty;  // amplitude and step variables
  var i, doc_width = 1200, doc_height = 800;  
  if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
  }
  dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();
  snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTmL6TUX_MoO8pHiytAOn5t4QAinxdHdNvxl9hxFyK_jxp7HRkcUJXnVdP4yrKVOXutuy-qfdEGh3ghNHiCIfKRntSdgITR4Dt0T26Ec-hvPZWSqL8fsye6N3dtnX_Me28YLLcU0rsfXM/s18/coriandoli.gif" : snowsrc
  for (i = 0; i < no; ++ i) { 
    dx[i] = 0;                        // set coordinate variables
    xp[i] = Math.random()*(doc_width-50);  // set position variables
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;         // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 0.7 + Math.random();     // set step variables
        if (ie4up||ns6up) {
      if (i == 0) {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
      } else {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
      }
    }
  }
  function snowIE_NS6() {  // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
        doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    for (i = 0; i < no; ++ i) {  // iterate for every dot
      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>

I più bravi possono provare a modificare le impostazioni a partire dall'URL dei coriandoli animati nelle due occorrenze colorate di rosso. L'elemento pagina è opportuno posizionarlo sopra all'area del post.

Demo Clicca qui

SCIA DI CORIANDOLI ANIMATI CON IL MOVIMENTO DEL MOUSE

Il codice da incollare sempre con le modalità illustrate sopra è il seguente

<script type='text/javascript'>
document.write("<style type='text/css'> ");
document.write("<!-- ");
document.write(".kisser {");
document.write("  position:absolute;");
document.write("  top:0;");
document.write("  left:0;");
document.write("  visibility:hidden;");
document.write("}");
document.write("-->");
document.write("</style> ");
kisserCount = 15 //maximum number of images on screen at one time
curKisser = 0 //the last image DIV to be displayed (used for timer)
kissDelay = 1000 //duration images stay on screen (in milliseconds)
kissSpacer = 50 //distance to move mouse b4 next confetti appears
theimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioXvwkMg2VHpWxutfD_Th1PUipMEFmvkeGPPTtWsuVQ_Wfl9FiHSMpptpZ-cmG0iejiKXa9FNlunzh5GxfHzSXIwZcH8XfmvPTo8E1vI0hp6-tizQQV1QW8xYFF1RBc8eG2UyFXhAG2-I/s18/coriandoli-animazione.gif" //the 1st image to be displayed
theimage2 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8mPRi3kYMQTWkE8uQ2m3ZU8iDTm8wPSyzS4lTpSW14XwbKVn3XUMvpasqyhGHk5VHwaUsIQAY21CvMSV3oCilBG-MG5CZ54XEWeP4p-qp4_T3wTVlkbcaO3gDjLpjzReaXNf57cAPbJs/s18/coriandoli-lenti.gif" //the 2nd image to be displayed
//Browser checking and syntax variables
var docLayers = (document.layers) ? true:false;
var docId = (document.getElementById) ? true:false;
var docAll = (document.all) ? true:false;
var docbitK = (docLayers) ? "document.layers['":(docId) ? "document.getElementById('":(docAll) ? "document.all['":"document."
var docbitendK = (docLayers) ? "']":(docId) ? "')":(docAll) ? "']":""
var stylebitK = (docLayers) ? "":".style"
var showbitK = (docLayers) ? "show":"visible"
var hidebitK = (docLayers) ? "hide":"hidden"
var ns6=document.getElementById&&!document.all
//Variables used in script
var posX, posY, lastX, lastY, kisserCount, curKisser, kissDelay, kissSpacer, theimage
lastX = 0
lastY = 0
//Collection of functions to get mouse position and place the images
function doKisser(e) {
  posX = getMouseXPos(e)
  posY = getMouseYPos(e)
  if (posX>(lastX+kissSpacer)||posX<(lastX-kissSpacer)||posY>(lastY+kissSpacer)||posY<(lastY-kissSpacer)) {
    showKisser(posX,posY)
    lastX = posX
    lastY = posY
  }
}
// Get the horizontal position of the mouse
function getMouseXPos(e) {
  if (document.layers||ns6) {
   
    return parseInt(e.pageX+10)
  } else {
   
    return (parseInt(event.clientX+10) + parseInt(document.body.scrollLeft))
  }
}
// Get the vartical position of the mouse
function getMouseYPos(e) {
  if (document.layers||ns6) {
    return parseInt(e.pageY)
  } else {
    return (parseInt(event.clientY) + parseInt(document.body.scrollTop))
  }
}
//Place the image and start timer so that it disappears after a period of time
function showKisser(x,y) {
  var processedx=ns6? Math.min(x,window.innerWidth-75) : docAll? Math.min(x,document.body.clientWidth-55) : x 
  if (curKisser >= kisserCount) {curKisser = 0} 
  document.getElementById("kisser" + curKisser).style.left = processedx + "px";
  document.getElementById("kisser" + curKisser).style.top = y + "px";
  document.getElementById("kisser" + curKisser).style.visibility = showbitK ; 
  /*
  eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".left = " + processedx + "px")
  eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".top = " + y + "px")
  eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".visibility = '" + showbitK + "'" )
  */ 
  if (eval("typeof(kissDelay" + curKisser + ")")=="number") {
    eval("clearTimeout(kissDelay" + curKisser + ")")
  }
  eval("kissDelay" + curKisser + " = setTimeout('hideKisser(" + curKisser + ")',kissDelay)")
  curKisser += 1
}
//Make the image disappear
function hideKisser(knum) {
  eval(docbitK + "kisser" + knum + docbitendK + stylebitK + ".visibility = '" + hidebitK + "'")
}
function kissbegin(){
//Let the browser know when the mouse moves
if (docLayers) {
  document.captureEvents(Event.MOUSEMOVE)
  document.onMouseMove = doKisser
} else {
  document.onmousemove = doKisser
}
}
window.onload=kissbegin
// Add all DIV's of hearts
if (document.all||document.getElementById||document.layers){
for (k=0;k<kisserCount;k=k+2) {
  document.write('<div id="kisser' + k + '" class="kisser"><img src="' + theimage + '" alt="" border="0"></div>\n')
  document.write('<div id="kisser' + (k+1) + '" class="kisser"><img src="' + theimage2 + '" alt="" border="0"></div>\n')
}
}
</script>

Si salva e si posiziona l'elemento pagina a piacere. I fiori animati possono essere sostituiti da altri cambiando l'URL di uno o di tutti e due entrambi colorati di rosso.

Demo Clicca qui

SCIA DI FIORI ANIMATI CHE SI FORMANO CON IL MOVIMENTO DEL MOUSE

Il codice da incollare secondo le modalità illustrate sopra è il seguente

<script type='text/javascript'>
document.write("<style type='text/css'> ");
document.write("<!-- ");
document.write(".kisser {");
document.write("  position:absolute;");
document.write("  top:0;");
document.write("  left:0;");
document.write("  visibility:hidden;");
document.write("}");
document.write("-->");
document.write("</style> ");
kisserCount = 15 //maximum number of images on screen at one time
curKisser = 0 //the last image DIV to be displayed (used for timer)
kissDelay = 1000 //duration images stay on screen (in milliseconds)
kissSpacer = 50 //distance to move mouse b4 next flower appears
theimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4cVuaRMwMtdWBmD7iPNNI91bFAs6bVMrcvX_W5ed7ojXZ-v84gzdwYj_diLIYi3cgqZ7JtybUmoEFNKOqE9KwQdIaIn8vSAGNhkYbLtviX_ottmShazOAtin1svcUSCaMWU-iMibRYOY/s41/flower.gif" //the 1st image to be displayed
theimage2 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4OnIVTD2HsIKuaZQ92OC-gDdh9ZjKv7DlWrwb8nkgGOkCv1boIi1S7DJUerZqa2Zw6kiszq8yEkv_XOP8yysIn6zcUxrSNU-6BE4orMlctG0Amh-nlCoOT4BvnciYh-MVXqZAbfehHTg/s37/lilium34.gif" //the 2nd image to be displayed
//Browser checking and syntax variables
var docLayers = (document.layers) ? true:false;
var docId = (document.getElementById) ? true:false;
var docAll = (document.all) ? true:false;
var docbitK = (docLayers) ? "document.layers['":(docId) ? "document.getElementById('":(docAll) ? "document.all['":"document."
var docbitendK = (docLayers) ? "']":(docId) ? "')":(docAll) ? "']":""
var stylebitK = (docLayers) ? "":".style"
var showbitK = (docLayers) ? "show":"visible"
var hidebitK = (docLayers) ? "hide":"hidden"
var ns6=document.getElementById&&!document.all
//Variables used in script
var posX, posY, lastX, lastY, kisserCount, curKisser, kissDelay, kissSpacer, theimage
lastX = 0
lastY = 0
//Collection of functions to get mouse position and place the images
function doKisser(e) {
  posX = getMouseXPos(e)
  posY = getMouseYPos(e)
  if (posX>(lastX+kissSpacer)||posX<(lastX-kissSpacer)||posY>(lastY+kissSpacer)||posY<(lastY-kissSpacer)) {
    showKisser(posX,posY)
    lastX = posX
    lastY = posY
  }
}
// Get the horizontal position of the mouse
function getMouseXPos(e) {
  if (document.layers||ns6) {   
    return parseInt(e.pageX+10)
  } else {   
    return (parseInt(event.clientX+10) + parseInt(document.body.scrollLeft))
  }
}
// Get the vartical position of the mouse
function getMouseYPos(e) {
  if (document.layers||ns6) {
    return parseInt(e.pageY)
  } else {
    return (parseInt(event.clientY) + parseInt(document.body.scrollTop))
  }
}
//Place the image and start timer so that it disappears after a period of time
function showKisser(x,y) {
  var processedx=ns6? Math.min(x,window.innerWidth-75) : docAll? Math.min(x,document.body.clientWidth-55) : x 
  if (curKisser >= kisserCount) {curKisser = 0} 
  document.getElementById("kisser" + curKisser).style.left = processedx + "px";
  document.getElementById("kisser" + curKisser).style.top = y + "px";
  document.getElementById("kisser" + curKisser).style.visibility = showbitK ; 
  /*
  eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".left = " + processedx + "px")
  eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".top = " + y + "px")
  eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".visibility = '" + showbitK + "'" )
  */ 
  if (eval("typeof(kissDelay" + curKisser + ")")=="number") {
    eval("clearTimeout(kissDelay" + curKisser + ")")
  }
  eval("kissDelay" + curKisser + " = setTimeout('hideKisser(" + curKisser + ")',kissDelay)")
  curKisser += 1
}
//Make the image disappear
function hideKisser(knum) {
  eval(docbitK + "kisser" + knum + docbitendK + stylebitK + ".visibility = '" + hidebitK + "'")
}
function kissbegin(){
//Let the browser know when the mouse moves
if (docLayers) {
  document.captureEvents(Event.MOUSEMOVE)
  document.onMouseMove = doKisser
} else {
  document.onmousemove = doKisser
}
}
window.onload=kissbegin
// Add all DIV's of hearts
if (document.all||document.getElementById||document.layers){
for (k=0;k<kisserCount;k=k+2) {
  document.write('<div id="kisser' + k + '" class="kisser"><img src="' + theimage + '" alt="" border="0"></div>\n')
  document.write('<div id="kisser' + (k+1) + '" class="kisser"><img src="' + theimage2 + '" alt="" border="0"></div>\n')
}
}
</script>

Si salva e si posiziona a piacere l'elemento pagina. Questo terzo codice utilizza lo stesso script del secondo e anche in questo caso si possono sostituire le immagini dei fiori che escono dal mouse dopo il movimento.

Demo Clicca qui

Queste personalizzazioni dovrebbero essere funzionanti solo nella versione desktop. Se non fosse così e non si volesse avere questi effetti nei cellulari e nei tablet occorre usare i tag condizionali per applicarli al widget con cui abbiamo inserito l'effetto. Non sarà necessario se il widget è stato inserito nella sidebar.