Mentre le prime ondate di freddo iniziano a turbare l’Italia intera, qui su dynamick vi proponiamo in vista del Natale, la classica ambientazione natalizia, una fantastica nevicata.
Ovviamente precisiamo che non si tratta del solito script jquery o javascript, ma sfrutta le potenzialità di css3 e sole tre immagini per emulare semplicemente la nevicata.
Innanzitutto scarichiamo il seguente archivio contenente le immagini da utilizzare: Download archivio.
Passiamo all’azione impostando immediatamente il css di riferimento.
- Inseriamo nel foglio di stile css della pagina la seguente stringa o modificare le proprietà relative al body:
body{ background-color: #2ea0f3; /*Colore di sfondo del corpo*/ background-image: url('snow.png'), url('snow2.png'), url('snow3.png'); /*immagini*/ -webkit-animation: snow 20s linear infinite; /*animazione su safari e chrome*/ -moz-animation: snow 20s linear infinite; /*animazione su browser mozilla*/ -o-animation: snow 20s linear infinite; /*animazione su browser opera*/ animation: snow 20s linear infinite; /*animazione su browser generica */ } - Impostato il nome dell’animazione, in questo caso snow, procediamo all’inserimento nel css dei keyframe che consentiranno il movimento della nevicata:
@keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-webkit-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-ms-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} }
La configurazione dovrebbe essere avvenuta correttamente e la neve dovrebbe aver regalato allo spazio web una atmosfera natalizia decisamente originale. Un esempio dello script in funzione è disponibile all’indirizzo: http://medmedicine.it
E’ da notare la compatibilità senza dubbio ampia ma pur sempre ristretta ai browser che supportano CSS3 e dunque animazioni e keyframes. Sono da escludere dall’elenco versioni di internet explorer precedenti alla 9 e altri browser obsoleti. Rimane comunque un fattore positivo, l’animazione è perfettamente visibile sia su dispositivi Android che iOS.
Certamente non si tratta di un grande effetto grafico, ma potrebbe regalare ai vostri visitatori la possibilità di sentirsi accolti nella magica atmosfera e coccolati dal proprio portale.