Pubblicato il 10/02/16e aggiornato il

Effetti speciali da installare nel blog per San Valentino.

Come installare effetti speciali di cuoricini animati, cupido e altre personalizzazioni nel nostro blog per la Festa di San Valentino.
Il 14 Febbraio è San Valentino, la Festa degli Innamorati che prende il nome da Valentino, vescovo romano nato a Terni che fu torturato e ucciso intorno al 200 d.C. San Valentino è venerato non solo dai cattolici ma anche da ortodossi e anglicani.

La festa che prende il nome dal santo pare che derivi da quella pagana romana pre-cristiana di Lupercalia. L'associazione a San Valentino è merito dei monaci benedettini di Terni che diffusero per primi la festa in Italia, festa che poi attecchì in Francia e Inghilterra. Il 15 Febbraio San Faustino è invece la festa dei single. Secondo la tradizione pare che San Faustino da Brescia desse la possibilità alle ragazze di incontrare il loro innamorato. Vediamo quali effetti e personalizzazioni installare in una pagina web per ricordare la Festività di San Valentino ai lettori che passassero nei giorni antecedenti per il nostro sito. L'obiettivo è quello di mostrare effetti divertenti ma non troppo invasivi.


cuori-cadenti


CASCATA DI CUORICINI LAMPEGGIANTI


Modificando opportunamente il classico codice della nevicata cioè sostituendo il fiocco di neve con questa immagine animata  cuore-pulsante  si visualizzeranno nel nostro sito tutta una serie di cuoricini lampeggianti che cadranno dall'alto in basso. In un blog su Blogger si va su Layout > Aggiungi un gadget > Base < HTML/Javascript > Sezioni del sito e si incolla questo codice

<script src="https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/cuore-che-lampeggia.js" type="text/javascript"></script>

Si salva e si posiziona l'elemento sopra all'area del post. In un blog Wordpress self-hosted tale codice invece si incolla su Aspetto > Widget > Testo.


CASCATA DI CUORICINI PULSANTI


Se al posto dei cuoricini lampeggianti si preferiscono quelli pulsanti con questa immagine  cuore-pulsante  allora il codice da incollare, sempre su Layout > Aggiungi un gadget > Base < HTML/Javascript > Sezioni del sito in Blogger e su Aspetto > Widget > Testo in un blog Wordpress, diventa

<script src="https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/cuore-che-pulsa.js" type="text/javascript"></script>


EFFETTO DEI CUORI CADENTI


Per mostrare dei cuori animati come nello screenshot mostrato in alto si va sempre su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla questo codice

<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!cuori){var cuori=Array()}if(!flash_urls){var flash_urls=Array()}cuori['rain1']="https://lh3.googleusercontent.com/-7EEsjFHGXlA/UQOVctk1EFI/AAAAAAAAfYE/UqcUlpun0Dk/s36/cuore1.png";cuori['rain2']="https://lh3.googleusercontent.com/-kze60BJqwEA/UQOaWXzehTI/AAAAAAAAfZA/GowZfItRXVU/s81/cuore5.gif";cuori['rain3']="https://lh6.googleusercontent.com/-oYFWTBNAWiU/UQOVhKFyr2I/AAAAAAAAfYU/fXlDpK5KbBQ/s36/cuore3.png";cuori['rain4']="https://lh3.googleusercontent.com/-GEKdFJqMcWc/UQOVjQSemkI/AAAAAAAAfYc/XJ3BMI8v2V8/s38/cuore4.png";$(document).ready(function(){var c=$(window).width();var d=$(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(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv')
.css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',cuori['rain'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src=//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js>');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'https://lh3.googleusercontent.com/-7EEsjFHGXlA/UQOVctk1EFI/AAAAAAAAfYE/UqcUlpun0Dk/s36/cuore1.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'#'}).append(a).appendTo('body')});</script>

Si salva l'elemento e si posiziona sopra l'area del post.

CASCATA DI CUORI TRASPARENTI

Se si desidera visualizzare nelle nostre pagine una cascata di cuori trasparenti  cuore-trasparente  si va sempre su Layout > Aggiungi un gadget > HTML/Javascript e  si incolla questo codice

<script> if(typeof $pdj=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/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>

Si salva e si posiziona l'elemento subito sopra l'area del post.



IMMAGINE ANIMATA DI CUPIDO CHE SCOCCA LE FRECCE


Questa immagine animata di cupido
cupido

verrà visualizzata volteggiante nel nostro layout. Per la sua installazione, dopo aver salvato il template, si va su Modello > Modifica HTML e subito sopra a </head>, si incolla questo codice
quindi subito sopra alla riga </body> si incolla quest'altro codice

<div id='CupidArc' style='position:absolute; z-index:999;  top:50px; left: -500px;'>
<img border='0' src='https://lh5.googleusercontent.com/-oMijP2tdVxs/TylEoERL9pI/AAAAAAAAWXs/8rk-oQtZomM/s166/cupid-1.gif'/></div>

e infine si salva il modello.


Gli effetti mostrati dovrebbero funzionare in qualsiasi pagina web che supporti il javascript.




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. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.