10 febbraio 2012

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://lh3.googleusercontent.com/-THYrCOY5fiI/TzUoHNeRVsI/AAAAAAAAWf0/-X8fe3dYs7U/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

cuori-cadenti-san-valentino

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.




7 commenti :

  1. Bellissimo questo effetto!! ...ma col mio blog che è pieno di stelle blu mi sa che i cuori stonano un pò ..comunque complimenti!! :)

    Baciotti by Pixia!!

    RispondiElimina
  2. ciao , l ho subito installato ma ora alla fine post leggo che i cuori sono visibili solo da me.... allora li tolgo ma quelli da te descritti in precedenza invece sono visibili da tutti? grazie.

    RispondiElimina
  3. @Fioredicollina
    Le icone del cacciavite sono visibili solo dal proprietario del blog, i cuori che cadono sono visibili ovviamente da tutti!!!!!!!!! Altrimenti come avresti fatto a vederli nel blog di prova?

    RispondiElimina
  4. hai ragione...che sbadata , ho logicamente interpretato male il tuo ultimo rigo....ora rimetto i cuori, qui nevica, ma nel blog faro' 'nevicare' cuori , almeno fino a San Valentino!!! grazie! :-)

    RispondiElimina
  5. Grazie, questo mi piace molto di più dell'altro ^_^

    RispondiElimina
  6. non si possono mettere in un singolo post?

    RispondiElimina
  7. @Marica
    Si possono mettere in un singolo post o anche in una singola pagina statica. Basta usare i tag condizionali per mostrare i widget solo dove vogliamo
    http://www.ideepercomputeredinternet.com/2010/11/come-mostrare-o-non-mostrare-widget-in.html

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.