Effetti speciali da installare nei blog su piattaforma Blogger per le Feste di Pasqua.
In occasione di festività particolarmente importanti è mia abitudine pubblicare una raccolta di widget per rendere il layout del nostro sito su Blogger in linea con quel periodo dell'anno. L'ho fatto per Halloween, per Natale e per San Valentino e adesso mi appresto a farlo anche per le Festività Pasquali.
Non è che si possa inventare chissà che cosa e alla fin fine si utilizzano i soliti script modificati con immagini pasquali. Quasi tutti gli effetti li avevo già presentati anche in passato quindi per i lettori che mi seguono da più tempo probabilmente non rappresenteranno una novità.
EFFETTO DEI CAMPANELLI PASQUALI
L'immagine utilizzata per questo effetto è la seguente 
e per la sua installazione si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e si incolla questo codice
e per la sua installazione si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e si incolla questo codice
Ho anche pubblicato una demo online
TRE IMMAGINI PASQUALI ANIMATE FLOTTANTI
Una soluzione più originale è quella di tre campanelli animati che si muovono nel blog
con un effetto di questo tipo
Dopo aver salvato il template si va su Modello > Modifica HTML, si cerca la riga </head> e, subito sopra, si incolla il seguente 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("immaginea",70,82);
immagineb=new ipcj1("immagineb",50,60);
immaginec=new ipcj1("immaginec",30,40);
idpceinmov3("immaginea");
idpceinmov3("immagineb");
idpceinmov3("immaginec");
} if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementByid)
window.onload=pagestart </script>
<!--Effetto Pasqua Fine -->
<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("immaginea",70,82);
immagineb=new ipcj1("immagineb",50,60);
immaginec=new ipcj1("immaginec",30,40);
idpceinmov3("immaginea");
idpceinmov3("immagineb");
idpceinmov3("immaginec");
} if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementByid)
window.onload=pagestart </script>
<!--Effetto Pasqua Fine -->
Si salva il modello. Il javascript colorato di viola è stato caricato su Google Drive. Si va quindi su Layout > Aggiungi un gadget > Base > HTML/Javascript e in Sezioni del sito si incolla
<div id="immaginea" style="position:absolute; left: -300px; width:70; height:70;">
<a href="#"><img src="https://lh5.googleusercontent.com/_nT13UtBmmiU/TawosEZcfHI/AAAAAAAAS4w/IqNlh3FWqIM/gif-bell2.gif" border="0" /></a></div>
<div id="immagineb" style="position:absolute; left: -400px; width:70; height:70;">
<a href="#"><img src="https://lh3.googleusercontent.com/_nT13UtBmmiU/Tawov-R_YUI/AAAAAAAAS40/L-IFcNd4xRU/gif-bell3.gif" border="0" /></a></div>
<div id="immaginec" style="position:absolute; left: -500px; width:70; height:70;">
<a href="#"><img src="https://lh6.googleusercontent.com/_nT13UtBmmiU/TawozfGQFNI/AAAAAAAAS44/Qmck2iOXflg/paques-04.gif" border="0" /></a></div>
<a href="#"><img src="https://lh5.googleusercontent.com/_nT13UtBmmiU/TawosEZcfHI/AAAAAAAAS4w/IqNlh3FWqIM/gif-bell2.gif" border="0" /></a></div>
<div id="immagineb" style="position:absolute; left: -400px; width:70; height:70;">
<a href="#"><img src="https://lh3.googleusercontent.com/_nT13UtBmmiU/Tawov-R_YUI/AAAAAAAAS40/L-IFcNd4xRU/gif-bell3.gif" border="0" /></a></div>
<div id="immaginec" style="position:absolute; left: -500px; width:70; height:70;">
<a href="#"><img src="https://lh6.googleusercontent.com/_nT13UtBmmiU/TawozfGQFNI/AAAAAAAAS44/Qmck2iOXflg/paques-04.gif" border="0" /></a></div>
Si salva e si posiziona sopra l'area del post. Le immagini sono inserite tramite il loro URL colorato di rosso mentre opzionalmente si possono anche inserire dei link al posto dei cancelletti ( # ).
CADUTE DI OGGETTI PASQUALI
Riporto anche il classico effetto ricavato da Dynamic Drive usato per la prima volta per la nevicata.
Il codice è semplicissimo e si inserisce senza modificare il modello. Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e in Sezioni del sito si incolla questo codice
<script src="https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua1.js" type="text/javascript"/></script>
Si salva e preferibilmente si posiziona sopra l'area del post. L'immagine cadente è la seguente 
. Si possono usare anche altre immagini che ho già caricato insieme allo script su Google Drive. Basterà modificare nel codice l'indirizzo del javascript. Accanto all'URL è mostrata l'immagine relativa
. Si possono usare anche altre immagini che ho già caricato insieme allo script su Google Drive. Basterà modificare nel codice l'indirizzo del javascript. Accanto all'URL è mostrata l'immagine relativa
https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua3.js
https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua4.js
https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua5.js
https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua6.js
https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua7.js
https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua8.js
ANGELI ANIMATI CHE CADONO
Concludo gli Effetti Pasquali con una serie di angeli animati che cadono nel sito
con un effetto di opacità e dissolvenza. Si può anche visualizzarlo online
Si va su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla
<script>
if(typeof $pdj=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://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['angeli']="https://lh6.googleusercontent.com/-Z-fKDnLDgsg/VRz3dU-QJAI/AAAAAAAAr9E/mmPCNso-lAs/s100/Angelo100.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','corazonDiv').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['angeli']).css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('corazonDrop').appendTo('#corazonDiv');f(g);g=null};var h=0;var j=0;$pdj(window).resize(function(){c=$pdj(window).width();d=$pdj(window).height()})});</script>
if(typeof $pdj=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://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['angeli']="https://lh6.googleusercontent.com/-Z-fKDnLDgsg/VRz3dU-QJAI/AAAAAAAAr9E/mmPCNso-lAs/s100/Angelo100.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','corazonDiv').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['angeli']).css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('corazonDrop').appendTo('#corazonDiv');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 preferibilmente sopra l'area del post. L'URL della immagine colorato di rosso può essere sostituito da quello di un'altra immagine a piacere. Lo script utilizza JQuery.
Nessun commento :
Posta un commento
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