Advertisement
  1. Web Design
  2. CSS3

Creare Una Collezione di Pre-Caricamenti Animati in CSS3

by
Read Time:8 minsLanguages:

Italian (Italiano) translation by Lorenzo Pieri (you can also view the original English article)

I Pre-caricamenti sono comunemente visibili nel web design moderno. Come utenti ci aspettiamo che il web sia veloce e fluido - non ci piace attendere. I Pre-caricamenti offrono un feedback visuale durante il caricamento dei contenuti, facendo sì che la probabilità che l'utente abbandoni il tuo sito sia ridotta e incontrando le aspettative di quest'ultimo.

CSS3 essenziale per creare Pre-Caricamenti

Prima di immergerci nel costruire la nostra collezione di Pre-Caricamenti CSS3, discuteremo alcuni degli attributi CSS3 che sono essenziali alla creazione di questa tipologia di Pre-Caricamenti

Gli Pseudo Elementi :before :after

Gli Pseudo elementi sono veramente utili nell'aiutarci a creare i Pre-Caricamenti CSS3. Gli Pseudo elementi essenzialmente creano un falso elemento prima e dopo l'elemento HTML in oggetto.

“Pseudo deriva dalla parola del Greco Antico pseudēs che significa falso.”

Questo processo è simile alla creazione di un elemento extra che davvero non esiste, ad ogni modo agli pseudo elementi si possono applicare stili utilizzando le regole CSS. Questi pseudo elementi non sono necessari per creare un pre-caricamento CSS3, ma sono utili perché ci permettono di utilizzare un markup minimo.

Gli pseudo-elementi possono ricevere stili proprio come gli altri elementi HTML, l'unica differenza sta nel dover specificare una proprietà di contenuto. Se non si specifica, questo pseudo-elemento non sarà reso visibile. La proprietà di contenuto può contenere qualsiasi tipo di testo che possa risultare utile se il vostro pre-caricamento necessita di contenere parole come "In caricamento...", ad ogni modo se non avete bisogno di alcun testo allora potete tranquillamente lasciare il contenuto vuoto.

Animazione CSS3

Gli pseudo-elementi CSS sono utili ma non essenziali per creare pre-caricamenti CSS3, ma la proprietà d'animazione lo è. Senza quest'ultima, il pre-caricamento fallirà nell'animarsi e sarà visto semplicemente come un valore statico - non esattamente utili per indicare che il contenuto è in fase di caricamento.

"Il componente principale delle animazioni CSS è @keyframes, la regola CSS dove l'animazione viene creata. Pensate a @keyframes come parti di una linea temporale. All'interno di @keyframes potete definire queste parti, ognuna con dichiarazioni di stile differenti." - Introduzione all'animazione CSS per novizi [EN]

Nota: prima di lanciarci nel demo sarebbe ideale far notare che i prefissi tipologia vendor non sono inclusi negli snippet di codice sotto riportati. Se avete bisogno dei prefissi vendor, allora date un'occhiata agli esempi su codepen.

1. Onda Audio

L'idea dietro a questo pre-caricamento è quella di creare un'animazione simile ad un onda audio.

HTML

Questo è reso possibile grazie alla creazione di cinque span, ognuna rappresentante una barra audio.

CSS

L'effetto è raggiunto grazie all'animazione basata sull'altezza delle singole span che varia dai 5px ai 30px. La span inoltre si muove anche giù di 15px sull'asse Y per dare l'effetto che stia crescendo dal centro.

Come default, l'animazione su ogni span accade allo stesso tempo. L'effetto onda Messicana è creato dall'aggiunta dell' animation-delay ad ogni span con un ritardo di 2 millisecondi. Ogni span è presa in considerazione grazie all'utilizzo del selettore nth-child()

2. Quadrato circolare

Questo pre-caricamento utilizza quattro quadrati che si spostano, ruotano e cambiano colore, diventando poi cerchi.

HTML

E' creato dall'utilizzo di quattro span. Ognuna è un cerchio/quadrato e vi sono applicate le proprie animazioni.

CSS

Tutte e quattro si trasformano da quadrato a cerchio aggiustano la proprietà CSS del border-radius da 0px (quadrato) a 20px (cerchio).

Ognuna ruota e si muove sull'asse X & Y in direzione opporta a quella è che la posizione attuale. Il colore di ogni span è altrettanto animato e varia dall'uniforme viola ad il proprio colore indipendente. Questo dà l'impressione che le varie forme si uniscano per passare da più cerchi ad un unico quadrato.

3. Forme che si incrociano

Il pre-caricamento delle forme che si incrociano è reso possibile da una singola div che utilizza gli pseudo elementi di cui avevamo parlato poco prima, :before ed :after

HTML

CSS

Un'animazione è piazzata su #preloader_3:before ed un'altra su #preloader_3:after. Ogni animazione cambia in un colore differente in tempo opposti. Similmente al pre-caricamento precedente, ogni pseudo elemento cambia da un cerchio ad un quadrato animando la proprietà CSS del border-radius

4. Il serpente

Il serpente è costruito attraverso una collezione di span e ad ognuna di queste vengono applicati degli stili per formare un cerchio.

HTML

Ecco il markup, ma potreste sempre provare a creare un serpente di pre-caricamento con tre cerchi, piuttosto che avere più span, questo semplicemente utilizzando la div #preloader_4 con :before e :after.

CSS

L'animazione è creata trasformando la posizione Y di ogni animazione a -10px e cambiando il colore da blu a giallo. Per creare l'effetto di ombre sottostanti si è aggiunto un box-shadow ad ogni span così che il valore verticale di questa proprietà cambi da 0px a 20px durante l'animazione.

Similmente al pre-caricamento numero 1, aggiungendo animation-delay ad ogni span e aggiustando ogni ritardo di 2 millisecondi, si va a creare l'effetto onda.

5. Disco ruotante

Questa è.. una cosa che ruota.

HTML

Qui utilizziamo solamente una div per il cerchio centrale e :after su quella div per creare le linee esterne.

CSS

Aggiungendo una proprietà di border al top ed al bottom, dandogli un border-radius di 50px crea due linee esterne. Un'animazione è aggiunta alla div principale, così da cambiare il colore di questa e creare un effetto di rotazione aggiungendo transform: rotate() . L'animazione all'elemento :after è aggiunta per cambiare il colore del bordo più esterno.

6. Finestra brillante

Siamo andati un po' su Microsoft con questa..

HTML

Questo pre-caricamento è creato attraverso una div e quattro span per i quadrati.

CSS

Questi quadrati sono posizionati in ordine di griglia. L'animazione è aggiunta alla div principale per rotare l'intero pre-caricamento. Un'altra animazione è poi aggiunta alle span così da scalarle dal 100% al 50%. Abbiamo poi aggiunto animation-delay ad ogni span così da creare l'effetto pulsante.

Conclusione

Il grande vantaggio di utilizzare pre-caricamenti CSS3 piuttosto che un immagine sta nel fatto che sono scalabili e pronti all'utilizzo su display retina. Ciò significa che indipendente dal device su cui sono visionati, appariranno sempre dettagliati, puliti e a prova di futuro (ad ogni modo ricordate che non tutti i browser legacy supportano le animazioni CSS3).

Comprendendo alcune importanti proprietà CSS3 e le tecniche, dovreste essere in grado di creare i vostri pre-caricamenti personali. Sono divertenti da creare e con un po' di sperimentazione vi sarà possibile creare alcune animazioni veramente spettacolari, così che gli utenti non lascino il vostro sito web.

Se avete creato qualche pre-caricamento di recente allora mi piacerebbe proprio dargli un'occhiata! Sentitevi liberi di lasciare un commento qui sotto.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.