La progettazione reattiva è ovunque e, sia che tu stia utilizzando un framework o stia scrivendo query multimediali, alcuni elementi della tua pagina sono destinati a spostarsi o ridimensionarli.
Se le tue query multimediali sono basate sulle dimensioni del browser e il browser viene ridimensionato, i tuoi elementi entreranno in posizione. Aggiungere una piccola animazione a quelle proprietà è un bel tocco per qualsiasi sito reattivo.
Oggi ti mostrerò quanto è facile aggiungere quel tocco in più, animando la larghezza e l'opacità degli elementi tra le query dei media.
Per questo semplice esempio useremo un div, contenente 3 div più piccoli. I div verranno scalati in base alla dimensione della finestra del browser. L'HTML è semplice:
Ora, il nostro CSS principale posizionerà le tre caselle all'interno del div principale e, in linea con un margine a destra:
.layout {width:960px;height:600px;background:#b34d6f;margin:auto;}.box {width:300px;height:200px;margin-right:25px;background:#4d77b3;display:inline-block;margin-top:50px;}.box:last-child {margin-right:0px;}Questo è il nostro layout principale, senza query multimediali, questo layout non si adatterà se la finestra cambia. Ora che abbiamo le nozioni di base, aggiungiamo le query sui media.
Le query multimediali vengono utilizzate spesso al giorno d'oggi. La maggior parte dei web designer li capisce, ma nel caso fosse la prima volta, ecco un rapido aggiornamento: le media query verificano la capacità del dispositivo che si sta utilizzando (larghezza, orientamento e risoluzione) e eseguono CSS specifici se le condizioni specificate per il media la query è soddisfatta. Nel nostro esempio, utilizzeremo due query multimediali che controlleranno se il browser è più piccolo di 960px e se è inferiore a 660px. Quindi imposteremo la larghezza degli elementi di conseguenza, nasconderemo anche l'ultimo div figlio in modo che gli altri due abbiano più spazio:
@media screen and (max-width:960px) {.layout {width: 870px;}.box {width:270px;}}@media screen and (max-width: 660px) {.layout {width:570px;}.box {width:170px;}.box:last-child {opacity:0;}}Questo è tutto ciò di cui abbiamo bisogno per le nostre domande sui media. Nota che è importante che questo codice sia posto sotto il codice CSS originale sopra in modo che le query multimediali sovrascrivano il codice sopra di loro. Se testi il tuo file ora vedrai cambiare la dimensione dei div e l'opacità dell'ultimo div secondario cambia quando ridimensiona la finestra del browser.
Noterai che per nascondere l'ultimo div child imposteremo la sua opacità a 0 invece di impostarla per la visualizzazione: none. Questo perché vogliamo essere in grado di animare la proprietà; l'opacità ha molti gradi diversi, mentre la visualizzazione è vera o falsa (e quindi non può essere animata).
Le animazioni CSS si sono dimostrate davvero utili quando si eseguivano queste piccole animazioni che usavamo per girare in jQuery, come ad esempio l'animazione di colori, larghezza e opacità.
Perché vogliamo che la pagina si animi nel suo insieme, usiamo il selettore * CSS e impostiamo la nostra animazione. Le animazioni CSS si degradano con garbo, ma ti consigliamo di aggiungere anche i prefissi dei fornitori, in modo che il supporto sia il più possibile:
*{-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;}Puoi vedere il risultato finale Qui.
Aggiungendo semplici animazioni come queste, sono un bel tocco finale per qualsiasi sito web. Alcune righe di codice aggiungono un tocco davvero piacevole al tuo sito responsive.
Hai animato query multimediali in un progetto? Quali effetti hai ottenuto? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, immagine in scala via Shutterstock.