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:
@keyframes
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.
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.
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 AND DEVELOPMENT.
La parallasse è, come recita Wikipedia,
il fenomeno per cui un oggetto sembra spostarsi rispetto allo sfondo se si cambia il punto di osservazione.
Il parallax scrolling (effetto parallasse) è una tecnica particolare di scorrimento…
MENSAJE
OPERACIÓN EJECUTADA
Utilizziamo i nostri cookie e quelli di terzi per migliorare i nostri servizi, compilare informazioni statistiche e analizzare le vostre abitudini di navigazione. Questo ci permette di personalizzare i contenuti che offriamo e di mostrarvi le pubblicità relative alle vostre preferenze. Cliccando su "Accetta tutto" acconsentite alla memorizzazione dei cookie sul vostro dispositivo per migliorare la navigazione del sito web, analizzare il traffico e assistere le nostre attività di marketing. Potete anche selezionare "Solo cookies di sistema" per accettare solo i cookies necessari al funzionamento del sito web, oppure potete selezionare i cookies che desiderate attivare cliccando su "Impostazioni".
Tradotto con www.DeepL.com/Translator (versione gratuita)" o "Rifiuta".
Questi cookie sono necessari per il funzionamento del sito Web e non possono essere disattivati sui nostri sistemi. Generalmente vengono impostate solo in risposta alle vostre azioni di richiesta di servizi, come l'impostazione delle vostre preferenze sulla privacy, l'accesso o la compilazione di moduli. È possibile impostare il browser in modo da bloccare o avvisare l'utente di questi cookie, ma alcune aree del sito non funzioneranno. Questi cookie non memorizzano alcuna informazione di identificazione personale
Performance Cookies
Questi cookie ci permettono di contare le visite e le fonti di traffico in modo da poter valutare le prestazioni del nostro sito e migliorarle. Ci aiutano a sapere quali sono le pagine più o meno visitate e come i visitatori navigano nel sito. Tutte le informazioni raccolte da questi cookie sono aggregate e quindi anonime. Se non consentite l'utilizzo di questi cookie, non sapremo quando avete visitato il nostro sito e non saremo in grado di valutare se ha funzionato correttamente
Cookies Funzionali
Questi cookie consentono al sito Web di fornire una migliore funzionalità e personalizzazione. Essi possono essere impostati dalla nostra azienda o da fornitori esterni di cui abbiamo aggiunto i servizi alle nostre pagine. Se non si consente l'utilizzo di questi cookie, alcuni di questi servizi potrebbero non funzionare correttamente
Cookies Pubblicitari
Questi cookie possono essere impostati attraverso il nostro sito dai nostri partner pubblicitari. Possono essere utilizzati da queste aziende per profilare i vostri interessi e visualizzare annunci pertinenti su altri siti. Non memorizzano direttamente le informazioni personali, ma si basano sull'identificazione univoca del browser e del dispositivo Internet. Se non si consente l'utilizzo di questi cookie, si vedrà una pubblicità meno mirata