Il Responsive Design è ovunque, e che scriviate le Media Queries di vostra mano o usiate un framework, alcuni elementi all’interno della pagina saranno soggetti ad animazioni.

Se le tue Media Queries sono basate sulla dimensione della finestra del browser, e la finestra viene ridimensionata, allora i tuoi elementi appariranno sullo schermo. Aggiungere un’animazione a queste proprietà è un ottimo tocco grafico al vostro sito responsive.
Oggi, andrò a mostrarvi come è semplice aggiungere questo effetto, animando la larghezza e l’opacità degli elementi attraverso le Media Queries.

Il Layout

Per questo esempio utilizzeremo un div, contenente altri 3 div. Il div si ridimensionerà in base alla grandezza della finestra del browser. L’HTML è molto semplice:

[code lang=”html”]
<div class=’layout’>
<div class=’box’></div>
<div class=’box’></div>
<div class=’box’></div>
</div>
[/code]

Adesso il nostro css principale posizionerà i 3 div dentro al contenitore, in linea con un margine a destra:

[code lang=”css”]
.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;
}
[/code]

Questo è il nostro layout principale, senza Media Queries, e non si addatterà nel caso in cui il viewport cambi. Adesso che abbiamo la base pronta, aggiungiamo le nostre Media Queries.

Aggiungere le Media Queries

Le Media Queries sono usate in modo costante ai giorni nostri. Molti Web Designer capiscono come funzionano, ma nel caso questa sia la prima volta per te, diamo una piccola rinfrescata: le Media Queries comprendono su quale dispositivo viene visualizzato il tuo sito (larghezza, orientamento e risoluzione), e attivano particolari regole CSS nel caso in cui la condizione della Media Queries si avveri. Nel nostro esempio, useremo 2 Media Queries che controllano se la larghezza del browser è inferiore a 960px, e se è inferiore a 660px. Imposteremo la larghezza degli elementi in modo specifico, e nasconderemo l’ultimo div, in modo che gli altri due abbiano più spazio:

[code lang=”css”]
@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;
}
}
[/code]

Questo è ciò che ci serve per le nostre Media Queries. Importante che questo codice venga impostato dopo il normale CSS in modo che le regole scritte sovrascrivano il CSS originale. Se testate il vostro file adesso vedrete cambiare la dimensione dei div e l’opacità dell’ultimo div quando ridimensionate la finestra.
Avrete notate che abbiamo impostato l’opacità a zero dell’ultimo div per poterlo animare invece che display:none.

Aggiungere l’animazione

Le animazioni CSS hanno dimostrato di essere molto maneggevoli, rispetto ad usare jQuery per ottenere gli stessi risultati.
Dato che vogliamo sia tutta la pagina ad animarsi, useremo il selettore *:

[code lang=”css”]
*{
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
[/code]

16 consigli per aumentare il traffico e le visite al tuo Sito Web

LASCIA UN COMMENTO