Cuori che cadono con effetto trasparenza per San Valentino.

Dopo aver pubblicato il post sui cuoricini di San Valentino usando lo stesso script della neve che cade ecco che presento una variante che penso possa essere gradita dai lettori che abbiano un animo particolarmente romantico.

Si tratta sempre di cuori che cadono ma stavolta è stata utilizzata la libreria JQuery e l'effetto opacità che porterà alcuni cuori quasi a scomparire. Può essere vista come una metafora della vita in cui ci sono amori che rimangono sempre in primo piano e che traggono nuova linfa dal trascorrere del tempo mentre altri finiscono inevitabilmente in qualche recondito anfratto della memoria.

Una dimostrazione di questo effetto può essere vista nel post di Demo dei cuori cadenti che ho pubblicato in uno dei miei tanti blog di prova.

L'installazione dell'effetto non ha bisogno di nessuna abilità particolare. Basta andare su Design > Layout > Aggiungi un gadget > HTML/Javascript, evitare di digitare il titolo del widget e incollare in Sezioni del sito il seguente codice

<!-- CUORI CADENTI PER SAN VALENTINO INIZIO -->
<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['cuoreSV']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvE5nMr8pd7wae11b9AZ3bn9I4Cw02XgF3cf2tCBp0dtzwXlbZ6XL_mgwy7uwGyNVXY0xVNBqf4LRINFJhqdeKMAV53Jw4_G0W0IZLqBCu7JwK0HLa1bBLKEia84wGRKLaxDwucrc6ojI/s32/heart2.png";$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','cuoreC').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['cuoreSV']).css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('cuoreCad').appendTo('#cuoreC');f(g);g=null};var h=0;var j=0;$pdj(window).resize(function(){c=$pdj(window).width();d=$pdj(window).height()})});</script>
<!-- CUORI CADENTI PER SAN VALENTINO FINE - http://www.ideepercomputeredinternet.com -->

Salvare l'elemento pagina e posizionarlo sopra all'area del post o sotto l'header. L'effetto sarà simile a questo

Al posto di questa immagine  il cui URL è colorato di rosso, può anche essere inserita una immagine diversa, per esempio quest'altra  . Per acquisirne l'indirizzo basta cliccarci sopra, selezionare e copiare l'URL andando con il destro del mouse sulla immagine che sarà visualizzata con l'Effetto Lightbox nativo di Blogger e scegliere Copia URL Immagine. Le immagini debbono avere delle dimensioni intorno ai 25-40 pixel. Per disinstallarlo basta semplicemente rimuovere l'elemento pagina andando su Layout o cliccando sulla icona della chiave e del cacciavite per aprirlo direttamente dal blog. Visto che ci sono e che in molti me lo hanno chiesto, ricordo che queste icone sono viste esclusivamente dal proprietario del sito.