Paesaggi Parallax costruiti interamente con CSS e HTML

Il CSS3 ha messo finalmente fine alle nostre frustrazioni: con delle semplici proprietà si aprono infatti 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.

Wow, direte voi! Ma come si usano?

Fondamentalmente sono due le regole da utilizzare:

1. @keyframes
2. animation

@keyframes

Abbiamo bisogno del @keyframes per inizializzare l'animazione vera e propria, che sarà richiamata poi da animation.

Il funzionamento è semplice: si stabiliscono degli stati di partenza e arrivo dell'animazione, e volendo, i passaggi intermedi, non dimenticando di assegnare un nome alla nostra animazione esempio: test.

Se ad esempio si vuole che un elemento passi da sfondo nero a sfondo blu basta fare:

@keyframes test { from {background:black;} to {background:blue;} }

Il nome dell'anmazione da noi scelto, ci sarà utile per richiarmarla successivamente con la regola animation.

Animation

Animation applica il set di animazioni definito da @keyframes.
In effetti animation è una short rule, risultante dalle 6 regole derivate:

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

animation-name

È una regola base: serve a richiamare il set di regole definito da @keyframes. Nel caso della nostra animazione "test", basta fare:

.nomeclasse {animation-name:test;}

animation-duration

Animation duration serve a definire il tempo di esecuzione delle regola. Tempo che può esser escodesso in secondi (s) o millisecondi (ms). Esempio:

.nomeclasse {animation-duration:4s;}

animation-timing-function

Questa regola permette di variare la curva di velocità dell'animazione. Ad esempio, si può ottenere un'animazione lenta all'inizio ma più veloce alla fine. I possibili valori sono:

• ease: l'animazione parte piano, accelera e poi rallenta di nuovo. È il valore di default
• linear: animazione con velocità costante
• ease-in: animazione con partenza lenta
• ease-out: animazione con arrivo lento
• ease-in-out: animazione con partenza e arrivo lenti
• cubic-bezier(x,x,x,x): per creare animazioni personalizzate.

.nomeclasse {animation-timing-function:ease-in;}

animation-delay

Permette di ottenere una "partenza ritardata" dell'animazione.

.nomeclasse {animation-delay:0.5s;}

animation-iteration-count

Indica la durata dell'animazione.

.nomeclasse {animation-iteration-count:2;} .nomeclasse {animation-iteration-count:infinite;}

animation-direction

Usata per stabilire la direzione dell'animazione:, standard, direzione opposta o in modo alternato. I possibili valori sono:

• linear: valore di default
• reverse: l'animazione parte *al contrario*
• alternate: l'animazione si comporta normalmente nei cicli dispari, e inversa in quelli pari
• alternate-reverse: l'animazione si comporta normalmente nei cicli pari, e inversa in quelli dispari

Vi abbiamo spiegato le basi delle animazioni con i CSS. Ora verrà il punto complicato: capire come utilizzarle e soprattutto cosa mostrare a chi non ha browser moderni....;-)

Passiamo a parlare del parallax

Effetto parallax: cos’è?

L’effetto parallax è un principio di design della tecnologia di animazione che sfrutta gli effetti della percezione umana. L'obiettivo è quello di trasmettere la profondità di campo con mezzi di rappresentazione bidimensionali.

A partire dalla fine degli anni 2000 lo scorrimento parallax è entrato in azione anche nel web design. Nel 2011 il sito web nikebetterworld.com, ora non più online, ha attirato l’attenzione dei media.

I siti parallax utilizzano un metodo a livelli: il punto di partenza è un sito web a una pagina i cui elementi di design sono disposti su diversi livelli e possono essere spostati indipendentemente l'uno dall'altro in senso orizzontale o verticale.

Ma, torniamo a parlare di come conciliare parallax e animazioni.

Negli esempi seguenti, si può aprezzare come gli autori del codice, attraverso l'utilizzo di CSS e HTML, siano riusciti a reallzzare un panorama parallax animato.

Non è difficile, vero?

Chiudiamo con una nota di compatibilità.

Bisongna tener presente che questo effetto può porre diversi problemi su dispositivi mobili e/o con interfaccia touch, specie quando è applicato sulle immagini di sfondo. Non è un caso che molti plugin prevedono esplicitamente la disabilitazione dell’effetto su questa classe di device.

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.