Pubblicato il 18/04/11 - aggiornato il  | 5 commenti :

Effetti speciali da inserire nel blog in occasione delle Feste di Pasqua.

Gli sviluppatori chiamano Easter Eggs dei programmi nascosti che inseriscono appositamente per fare dei piacevoli scherzi agli utenti. Si tratta di qualcosa che è estraneo alle funzionalità del software e sono sempre assolutamente innocui. In genere si tratta di videogiochi o cose simili. Non ho intenzione di fare nulla di simile ma mi è stato chiesto in un commento o in una email, adesso non ricordo bene, se intendevo presentare degli effetti dedicati alle prossime Festività Pasquali.
Non sono in una particolare fase creativa quindi mi sono limitato a utilizzare il celebre script di Dynamic Drive per la neve che cade inserendo delle immagini più attinenti a questo periodo. Ho sostituito quindi i fiocchi di neve, i cristalli di neve e le foglie secche con delle immagini animate tipiche del periodo pasquale. Riporto i codici qui di seguito. Vedremo successivamente come e dove inserirli:
<script src="http://anonimotoscano.googlepages.com/pasqua1.js" type="text/javascript"/></script>
provocherà una caduta di queste uova uova di pasqua   
<script src="http://anonimotoscano.googlepages.com/pasqua2.js" type="text/javascript"/></script>
le uova di Pasqua avranno questa forma  uova di pasqua animate
<script src="http://anonimotoscano.googlepages.com/pasqua3.js" type="text/javascript"/></script>
ci sarà un effetto caduta di campanelli suonanti  campanelli di pasqua
<script src="http://anonimotoscano.googlepages.com/pasqua4.js" type="text/javascript"/></script>
in questo caso vedremo delle uova ruotanti uovo ruotante
<script src="http://anonimotoscano.googlepages.com/pasqua5.js" type="text/javascript"/></script>
produrrà l'effetto di uova che rimbalzano uova rimbalzano
<script src="http://anonimotoscano.googlepages.com/pasqua6.js" type="text/javascript"/></script>
indurrà l'effetto di una cascata di uova che rotolano uova che rotolano
<script src="http://anonimotoscano.googlepages.com/pasqua7.js" type="text/javascript"/></script>
comporterà una cascata di pulcini pulcino
<script src="http://anonimotoscano.googlepages.com/pasqua8.js" type="text/javascript"/></script>
per un effetto di tre uova ruotanti tre uova ruotanti.
Ciascuno script deve essere installato con le solite modalità. Si va su Design > Aggiungi un gadget > HTML/Javascript e si incolla il codice in Sezioni del sito senza mettere il titolo. Si salva, quindi si posiziona con il mouse nella parte alta del layout e si clicca nuovamente su Salva. Non si possono installare due effetti simultaneamente nella stessa pagina. Lo si può fare in pagine diverse usando i tag condizionali. Ho messo in rete una dimostrazione di uno di questi effetti
Se si vuole qualcosa di più sofisticato si può sfruttare lo script del movimento casuale di tre oggetti. In questo caso si va su Design > Modifica HTML e si cerca la riga </head>. Subito sopra si incolla il codice
<!--Effetto Pasqua Inizio-->
<script src='https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/movimento.js' type='text/javascript'/>
<script type='text/javascript'> var immaginea, immagineb, immaginec
function pagestart(){ immaginea=new ipcj1(&quot;immaginea&quot;,70,82);
immagineb=new ipcj1(&quot;immagineb&quot;,50,60);
immaginec=new ipcj1(&quot;immaginec&quot;,30,40);
idpceinmov3(&quot;immaginea&quot;);
idpceinmov3(&quot;immagineb&quot;);
idpceinmov3(&quot;immaginec&quot;);
} if (window.addEventListener)
window.addEventListener(&quot;load&quot;, pagestart, false)
else if (window.attachEvent)
window.attachEvent(&quot;onload&quot;, pagestart)
else if (document.getElementByid)
window.onload=pagestart </script>
<noscript><a href='http://goo.gl/KcXnh' target='_blank'>Easter Effect</a></noscript>
<!--Effetto Pasqua Fine - www.ideepercomputeredinternet.com-->
Si salva il modello. Si va quindi su Design > Aggiungi un gadget > HTML/Javascript e si incolla quest'altro codice
<div id="immaginea" style="position:absolute; left: -300px; width:70; height:70;">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKnMPSR3g7cZR7MHhub1DqdSBSYI5xCDkusygb-5kQvAh_ud3ylBr5ewsIbIaAtx9brfhIKiDjPNPsfayKCo2NcOtfwT0EzgiLZUCcwfE2eTwj2nJFsQ-14VYIzDX4q0ws53ZAT8YvMRE/" border="0" /></a></div>
<div id="immagineb" style="position:absolute; left: -400px; width:70; height:70;">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUr-umvlK6o7v9ut-XkvPkKmAsN_bPxdqc1tRUSvTFQ-vvhyn2N5aQ2EMw9NJD4HRZI-pF09bKzEIpSjyvYCV4uX6wn9gIlHA10dYsARGoBHqExGcYK98C-TSwf5hFIc2MxORguUTUPJI/" border="0" /></a></div>
<div id="immaginec" style="position:absolute; left: -500px; width:70; height:70;">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXAii1agOEsTAAJ_LbB80nQ54spgHPbwu2OqIhRtaX6KKf0AuGpXD81DG21i_vbc5lI73fmx9NJL93GYaCXOchL0F6Si78KDwlu3pgHy0v57rVq1wqMK4laB8ghM5WwtKjaErX5DgVdkk/" border="0" /></a></div>
Si salva e si posiziona l'elemento nella parte alta del layout. Si salva di nuovo. Naturalmente si possono sostituire le immagini sostituire le immagini che ho inserito e il cui URL è colorato di rosso con altre a vostra scelta. La dimensione non deve però essere molto diversa dai 70 pixel indicati in blu. Al posto del cancelletto ( # ) si può inserire un URL per collegare ciascuna immagine a una determinata pagina. Si visualizzeranno tre immagini pasquali che vagheranno in modo casuale per tutto il layout rimbalzando quando toccheranno uno dei quattro lati
effetti pasquali immagini casuali
Il codice può anche essere inserito in una pagina statica, cosa che ho fatto in questa dimostrazione


5 commenti :

  1. Grazieeeeeeeee, ho messo le campanelle.

    RispondiElimina
  2. Grazie Ernesto, lo sai che aspettavo con ansia questo post ^_^ Grazie mille, è molto più di quello che avrei mai osato chiedere!!

    RispondiElimina
  3. Grazie, Ernesto!
    ho installato quello più sofisticato.

    RispondiElimina
  4. bellissimi by http://www.youpixel.it/

    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