Animazione di aggiornamento delle Live Tiles con CSS3
La caratteristica principale di Windows 8 sono le Live Tiles, ovvero dei riquadri di piccole o grandi dimensioni che si aggiornano in base ai contenuti dell’utente. In questo articolo spiegherà come creare l’animazione di aggiornamento delle Live Tiles utilizzando solamente del puro CSS3.
Live Tiles con CSS3
Come potete notare nella DEMO le varie Live Tiles che trovate all’interno si aggiornano o cambiano aspetto dopo circa 10 secondi, come su Windows 8 esse mostreranno ulteriori dettagli attinenti all’applicazione stessa e alle informazione dell’utente che esse contengono. Ad esempio il meteo cambierà alternativamente dalla sua icona al meteo attuale della zona scelta (ovviamente il meteo non si aggiorna, è solo una demo).
La caratteristica principale su cui voglio dedicarmi è l’animazione di aggiornamento delle live tiles, ossia lo scorrere dal basso verso l’alto delle informazioni in maniera alternata e infinita. Dovremmo quindi creare 2 animazioni personallizzate con CSS3 per far scorrere i 2 elementi e farli alternare.
Creare un animazione personalizzata con keyframe
Ci sono vari metodi per creare un animazione personalizzata con CSS3 ma il metodo principale è la regola KEYFRAME, essa infatti descrive come si deve trasformare un elemento durante l’animazione. La sintassi corretta di KEYFRAME è la seguente:
@keyframes NOME_FUNZIONE { 0% { top:0px; } 100% { top:100px; } } |
Una volta creata l’animazione desiderata dovremo decidere a quale elementi destinarla. Per questo utilizzeremo la regola ANIMATION di CCS3. Essa infatti determinerà a quale elemento destinare l’animazione, quale animazione destinare, il ritardo di partenza in secondi, il suo timing, la durata in secondi, quante volte riprodurre l’animazione e la sua direzione. Ecco la sintassi di ANIMATION:
animation: NOME_ANIMAZIONE 5s linear 2s infinite alternate;
In questo caso ci occuperemo solamente della durata in secondi dell’animazione e la riprodurremo all’infinito.
Riprodurre le Live Tiles con HTML
Con un pò di semplice CSS e HTML riproduciamo le Live Tiles di Windows 8. Per quanto riguarda l’HTML, sono un gruppo UL con tanti LI per ogni live tiles, al loro interno avranno 2 elementi se dovranno avere un contenuto aggiornabile. Ecco velocemente il codice HTML di una live tiles:
<li class="tiles-big meteo active"> <a href="#"> <div class="up"> <img src="img/meteo.png"> </div> <div class="down"> <h1>20°<h1> <h2 class="mese">Cagliari</h2> <h2 class="mese">Nuvoloso</h2> <div class="group first"> <p>Oggi</p> <p>24°/20° Nuvoloso</p> </div> <div class="group"> <p>Domani</p> <p>22°/18° Nuvoloso</p> </div> </div> <span class="title">Meteo</span> </a> </li> |
Notiamo all’interno due DIV con le classi “up” e “down” che saranno quelle che si alterneranno. L’elemento LI ha più classi, fondamentale è la classe active che determina se far partire l’animazione sull’elemento. Il resto sono informazioni che possiamo modificare a nostro piacere.
Animare con CSS3: keyframe a animate
Gli elementi si muovono grazie a 2 animazioni, la prima di nome toggleTilesUp muoverà verso l’alto dopo 10 secondi l’elemento con classe “UP”, poi lo nasconderà e sposterà verso il basso, infine lo rimostrerà riportandolo verso l’alto. La seconda animazione di nome toggleTilesDown farà il contrario, attenderà 10 secondi e sposterà l’elemento “DOWN” verso l’alto, passati altri 10 secondi sposterà verso l’alto questo elemento, una volta terminata l’animazione gli elementi ritorneranno alla loro posizione iniziale pronti ad essere di nuovo animati.
Il codice CSS è sicuramente più chiaro:
@keyframes toggleTilesUp { /* rimani in posizione*/ 0% { top: 0; } 48% { top: 0; } /*sposta in alto e mostra */ 50% { top: -100%; opacity:1; } /*nascondi elemento*/ 51% { opacity:0; } 55% { opacity:0;} 65% { opacity:0; } /* sposta in basso */ 97% { top: 100%; opacity:0; } 98% { top: 100%; opacity:0; } /*riporta a posizione iniziale e mostra*/ 100% { top: 0; opacity:1; } } @keyframes toggleTilesDown { /* tieni l'elemento in basso */ 0% { top: 100%; } 48% { top: 100%; } /* sposta dentro il riquadro */ 50% { top: 0; } 98% { top: 0; } /* spostalo verso l'alto per farlo sparire */ 100% { top: -100%; } } |
Daremo quindi ora le animazioni agli elementi con classe Up e Down, essi otterranno quindi le animazioni alternate che si ripeteranno all’infinito. Daremo inoltre le animazioni a quelli elementi che avranno anche la classe “active”.
.active .up{ position: absolute; top: 0px; width: 100%; height: 100%; animation: toggleTilesUp 20s infinite cubic-bezier(.11,.59,.43,.56); } .active .down{ position: absolute; top: 100%; width: 100%; height: 100%; animation: toggleTilesDown 20s infinite cubic-bezier(.11,.59,.43,.56); } |
Le animazioni avranno entrambe una durata di 20 secondi e avranno un timing personalizzato grazie alla funzione cubic-bezier.
Tutto il resto del codice sono solamente dei dettagli per ricreare con il CSS le live tiles di Windows 8. Spero la DEMO vi sia stata utile e d’ispirazione, fatemi sapere! Per dubbi o suggerimenti commentate.
A presto!
CSS3, featured, HTML, Windows8
