Come realizzare uno sfondo animato originale e adatto al contesto

In passato, per rendere un sito dinamico e quindi pieno di animazioni, effetti e quant’altro, ricorrevamo quasi sempre all’aiuto di Flash e quindi dell’action script, che era forse l’unico linguaggio che ci permetteva di ottenere determinati effetti.

Fortunatamente, tutto questo è cambiato con l’ampliamento delle capacità del codice javascript (come jquery) grazie soprattutto ai nuovi framework. Ma per quelli che, come me, vanno avanti a pane, html e css, il jquery è stato sì una svolta, ma ancora un pelino macchinoso.

Il CSS3 ha messo finalmente fine a queste frustrazioni, con delle semplici proprietà che aprono infinite soluzioni.

Una tra tante, la possibilità di inserire uno sfondo animato in una pagina web.

In questo articolo vedremo proprio come rendere uno sfondo animato e adatto al contesto di lavoro in cui stiamo operando.

#1 La regola @keyframes

La possibilità di animare un oggetto o, come vedremo, uno sfondo (background), la otteniamo con la regola @keyframes, la quale definisce lo stato iniziale, finale o intermedio di un’animazione.

Tale regola è supportata dai seguenti browser:

  • Internet Explorer 10
  • Firefox
  • Opera

Mentre l’alternativa @-webkit-keyframes è supportata da:

  • Chrome
  • Safari

É doveroso precisare che la seguente regola non è supportata dalla versione 9 (e dalle precedenti) di Internet Explorer.

Qualcuno, come premesso a inizio articolo, ricorderà la “timeline” di Flash, con la quale era, ed è ancora possibile, creare delle animazioni, nella fattispecie un movimento da uno stato iniziale A a quello finale B, con le eventuali trasformazioni intermedie.

Il vantaggio di utilizzare una regola di CSS3, risiede nel fatto che non solo è facile da implementare, ma può sostituire in tutto e per tutto l’obsoleto Flash, assicurando lo stesso effetto visivo.

#2 Sintassi

Osserviamo più da vicino il codice, per poi analizzarlo:

@-webkit-keyframes nomeanimazione {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
	}

@keyframes nomeanimazione {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}
  • @keyframes definisce l’animazione;
  • nomeanimazione, è il nome dell’animazione che andremo poi a richiamare nello stile del div interessato;
  • from: definisce la posizione da cui dovrà partire l’animazione;
  • to: definisce la posizione in cui finirà l’animazione;

In questo caso, abbiamo stabilito che l’animazione inizierà con un background posizionato su un punto pari a 0 sull’asse delle X e sarà pari a 0 anche sull’asse delle Y: dovrà muoversi fino a raggiungere il 100% della sua larghezza.

Avremo quindi un’animazione di tipo orizzontale (da sinistra verso destra).

Se fosse stato l’inverso, ossia:

@-webkit-keyframes nomeanimazione {
	from { background-position: 0 100%; }
	to { background-position: 0 0; }
	}

@keyframes nomeanimazione {
	from { background-position: 0 100%; }
	to { background-position: 0 0; }
}

avremmo avuto un’animazione di tipo verticale (dall’alto verso il basso).

NB.

É possibile direzionare da destra a sinistra o dal basso verso l’alto, cambiando semplicemente la percentuale del punto di partenza e quella del punto di ritorno.

Come detto in precedenza, il nome che abbiamo scelto verrà poi richiamato nello stile, in questo modo:

div {      -webkit-animation: nomeanimazione 40s linear infinite
	animation: nomeanimazione 40s linear infinite; }

#3 Esempio 1: Sito di voli

Ipotizziamo di trovarci in una situazione in cui dover creare l’header di un sito che si occupa di voli e che vogliamo puntare su qualcosa di molto accattivante, piuttosto che ricorrere alla sola grafica statica. La soluzione c’è: in questo paragrafo analizzeremo gli strumenti per poterla mettere in pratica e, una volta acquisite le conoscenze necessarie, applicarli a qualsiasi altro contesto.

Innanzitutto andremo a creare l’immagine che intendiamo animare, nel mio caso ho scelto di creare un piccolo aereo che vola da destra verso sinistra, trascinando con sé la scritta “viaggia con noi”.

L’immagine è la seguente, nella sua larghezza completa (2447x190px):

volo

Il codice

In questa parte approfondiremo il codice relativo alla nostra situazione ipotetica.

Dunque, creiamo il file index.html e capiamo come sarà strutturato:

<body>

<div id="volo"></div>

</body>

Come possiamo vedere, sarà necessario un unico div per ottenere l’effetto desiderato, poiché tutto il lavoro spetterà al css, e nel quale inizieremo a scrivere:

/* Safari and Chrome */
@-webkit-keyframes animazione_volo {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
	}
/* Firefox */
@keyframes animazione_volo {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

Abbiamo appena definito che il nome dell’animazione sarà animazione_volo, tale animazione dovrà partire da destra e muoversi verso sinistra, percorrendo il 100% della larghezza dell’immagine che andremo ad impostare come sfondo.

Continuiamo con lo stile:

#volo	{ 
	width: 436px; 
	height: 192px; 
	background-image: url(volo.jpg);
	-webkit-animation: animazione_volo 30s linear infinite; /* Safari and Chrome */
	animation: animazione_volo 30s linear infinite;
}

Con width: 436px; abbiamo stabilito che il div che contiene lo sfondo sarà molto più stretto rispetto alla larghezza dell’immagine contenuta, questo per permettere all’animazione, e quindi al movimento, di essere visibile, cosa che non sarebbe successa se il div avesse avuto le stesse dimensioni dell’immagine.

In questo modo l’immagine si sposterà all’interno del div creando l’effetto animato che ricercavamo.

Con animation: animazione_volo 30s linear infinite definiamo che la nostra animazione dovrà durare 30 secondi per percorrere tutta la larghezza dell’immagine, in maniera lineare quindi mantenendo sempre la stessa velocità, e dovrà farlo in loop.

Di seguito l’alternativa per Safari e Chrome:

webkit-animation: animazione_volo 30s linear infinite

Ora avrete il vostro header, o banner, o qualunque altra cosa vogliate “muovere”, pronto per l’uso.

Vi starete chiedendo “Tutto qui?” Mi dispiace deludervi ma sì, è proprio tutto qui.

Questo è lo straordinario beneficio del CSS3: poca fatica, massimo risultato.

#4 Esempio 2: passeggiata nel villaggio

Il secondo esempio che vi propongo, potrebbe essere utile a chiunque volesse dare al proprio sito quel tocco di originalità, animando sia header che footer.

Nel mio caso ho immaginato uno sfondo celeste, con nuvole in movimento e la skyline di un villaggio in lontananza, emulando una passeggiata in macchina ammirando il paesaggio.

Per dare una durata diversa ad ognuna delle immagini, rendendo quindi le nuvole più lente e il paesaggio più veloce per dare un effetto quanto più veritiero possibile, ci avvialiamo di due immagini diverse, aventi le stesse dimensioni:

Nuvole.jpg

nuvole

Villaggio.png

villaggio

Il codice

Anche in questo caso, creiamo il file index.html e capiamo come sarà strutturato:

<body>

<div id="nuvole">
	<div id="villaggio"></div>
</div>

</body>

Stavolta avremo due div, uno che gestisce lo sfondo relativo alle nuvole, l’altro relativo alla parte del villaggio, il cui id si chiamerà “villaggio” e si troverà all’interno del div con id “nuvole”.

Come fatto in precedenza, impostiamo la regola:

@-webkit-keyframes animazionebg {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
	}

@keyframes animazionebg {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

Stabilendo che il nome dell’animazione dovrà essere animazionebg e tale animazione dovrà partire da destra e muoversi verso sinistra, percorrendo il 100% della larghezza dell’immagine che andremo ad impostare come sfondo.

Ed ora vediamo lo stile del div “nuvole”

#nuvole	{ 
	width: 560px; 
	height: 480px; 
	background-image: url(nuvole.jpg);
	background-position: 0px 0px;
	background-repeat: repeat-x;
	-webkit-animation: animazionebg 40s linear infinite; /* Safari and Chrome */
	animation: animazionebg 40s linear infinite;
}

…e del div “villaggio

#villaggio	{ 
	width: 560px; 
	height: 480px; 
	background-image: url(villaggio.png);
	background-position: 0px 0px;
	background-repeat: repeat-x;
	-webkit-animation: animazionebg 10s linear infinite; /* Safari and Chrome */
	animation: animazionebg 10s linear infinite;
}

Notiamo che la larghezza width: 560px è la stessa per entrambi, così come l’altezza height: 480px.

Mentre la parte relativa all’animazione, per “nuvole” sarà:

  • -webkit-animation: animazionebg 40s linear infinite;
  • animation: animazionebg 40s linear infinite;

e per “villaggio” invece:

  • -webkit-animation: animazionebg 10s linear infinite;
  • animation: animazionebg 10s linear infinite;

Noteremo che i due div avranno due velocità diverse, proprio per generare una sorta di tridimensionalità nell’effetto visivo.

Anche per questo esempio il codice è tutto qui, insomma, una passeggiata.

Conclusioni

Oggi abbiamo scoperto come rendere i nostri siti dinamici, accattivanti ed esteticamente “belli”, senza rinunciare alla funzionalità e semplicità.

Entrambi gli esempi sono visibili qui: Nuvole e Villaggio  e Aereo

Il pacchetto zip del codice completo è invece scaricabile qui.

Tag: ,

L'autore

Web e Graphic Designer dal 2009, freelance dal 2013, grammar nazi da sempre. Sono un'estimatrice della cultura giapponese, dei videogames retro e delle pogate ai concerti. Sostengo la sublime arte del dormire con cura e costanza, insieme alla musica e al mangiare. Talvolta anche contemporaneamente.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Altri articoli

Ecco qualche altro articolo che potresti trovare interessante:

18 commenti

Trackback e pingback

  1. Script per sfondo mobile in Chrome
    […] Safari, Opera e IE 10+ (Credo anche nove, ma non ne sono sicuro) e si basa solo sui css...…