HTML Mobile App: animazione CSS3 su pagine di una lista

dicembre 11, 2013
Share on Facebook0Tweet about this on Twitter0Pin on Pinterest1Share on Google+0

Nell’ultimo articolo ho spiegato come gestire gli eventi di fine animazione e fine transizione CSS3 tramite Modernizr, ottima tecnica per realizzare effetti performanti nella creazione di HTML Mobile App fluide e reattive.

In questo articolo, restando sempre nel tema delle HTML Mobile Apps, vedremo come combinare quella tecnica in combinazione con il framework animate.css, per realizzare una animazione css3 su pagine di una lista.

Forse ti potrebbe interessareAnimate.css: Raccolta di stili per animazioni CSS3 cross-browser.

Se sei un web designer interessato alla creazione di mobile app in HTML, CSS e Javascript, forse ti potrebbe interessare il mio e-book: HTML Mobile Accelerato, che spiega quali tecniche utilizzare per creare delle applicazioni fluide e altamente performanti, senza conoscere il codice nativo ma sfruttando solamente le tue conoscenze in ambito web.

L’idea è quella di creare la view di un’interfaccia mobile, contenente semplicemente un header ed una lista, alla quale applicheremo una paginazione tramite il click su due pulsanti “avanti”  e “indietro“.

paginazione-su-lista-con-CSS3

Il markup HTML

Come primo step impostiamo il markup HTML della pagina:

 

Dal codice possiamo vedere che il documento è molto semplice: abbiamo un header contenente i pulsanti “next” e “prev” per la paginazine, ed un tag article contenente la lista.

Siccome rappresenteremo ogni pagina con un elemento ul avente la classe ‘page‘, puoi ben notare che inizialmente sarà presente nel documento solo una pagina.

 

Gli stili CSS

Vediamo quali stili applicare alla pagina, al fine di ottimizzarne il layout per i dispositivi mobili

In primis abbiamo attribuito gli stili alla lista, in modo da renderla più accattivante, poi ci siamo soffermati sulla parte più importante, il posizionamento.

Usiamo poi un position:absolute per poter spostare la pagina all’interno del documento; con l’attribuito width:100% diamo alla pagina la stessa larghezza della finestra, mentre con gli attributi top e bottom dettiamo la sua altezza rispetto a quella del documento.

Il risultato è un layout fluido ed ottimizzato per ogni risoluzione (prova a ridimensionare la finestra nella demo)

Impostiamo una proprietà transform: translateX(-110%) , con i vari prefissi per la compatibilità, ad ogni pagina avente classe ‘next‘ o ‘prev‘, in modo da “nascondere” fuori dallo schermo (rispettivamente a destra o a sinistra) la div creata al click dei pulsanti avanti e indietro, ma non ancora animata.

schema-paginazione-css3

La libreria animate.css

Come già accennato, per animare le pagine ci serviamo delle due animazioni ‘slideInLeft’ e ‘slideInRight’ del framework CSS3 animate.css, per cui includiamo la libreria all’interno del tag head del documento (è possibile scaricare uno stilesheet custom dalla sezione custom build del sito):

Il codice Javascript

Includiamo come al solito jQuery nel documento. Visto che questo è soltanto un tutorial, per il rendering di ogni pagina successiva o precedente, ci limiteremo a clonare la pagina già esistente per poi inserire il nuovo elemento nel documento.

Ovviamente in un contesto reale (che presenti dati reali), l’operazione dovrebbe essere sostituita dalla generazione del markup tramite un sistema di javascript templating o altre logiche di codifica javascript in combinazione con dati (in formato json, xml ecc.) già precariati nella pagina, o magari caricati al click dei pulsanti “next” e “prev” tramite una chiamata Ajax.

Per prima cosa “ricaviamo” il nome dell’evento di fine animazione tramite Modernizr:

Poi passiamo alla gestione dell’evento c’lick’ su entrambi i pulsanti di ‘next‘ e ‘previ‘:

Dal codice puoi vedere che ho utilizzato lo stesso selettore per selezionare i pulsanti su cui gestire l’evento di click, in quanto le azioni da svolgere per entrambi sono le stesse, a parte la differenza della classe CSS che detta il tipo di animazione di entrata nello schermo (slideInLeft o  slideInRight).

Un aspetto da sottolineare è il fatto che la pagina precedentemente visualizzata viene rimossa dal documento alla fine dell’animazione di quella appena creata: ciò è pensato per alleggerire il markup su cui un eventuale dispositivo mobile dovrebbe eseguire il rendering.

Nel possibile scenario di un’app il cui compito è quello di mostrare un elevato numero di record all’interno di una lista paginata, dopo aver scorso qualche decina di pagine, l’utente potrebbe assistere infatti ad un improvviso arresto (o crash), dovuto all’elevato numero di elementi DOM su cui il browser sarebbe costretto ad eseguire il rendering.

paginazione-su-lista-con-CSS3

Il risultato finale

Il gioco è fatto! Dalla demo si può notare come applicando poche righe di codice Javascript e facendo svolgere quasi tutto il lavoro ai CSS3 tramite delle animazioni performanti, è possibile realizzare interfacce che non hanno nulla da invidiare a quelle di applicazioni native (hai notato l’ottima fluidità dell’animazione di entrata di ogni pagina?).

Crea la tua mobile app in HTML, CSS3 e Javascript

Utilizzando questa tecnica unita a molte altre ho creato per i miei clienti oltre 10 applicazioni per dispositivi mobile, tra cui due progetti personali: Tint Weather App e Dieta SI o NO?. Se anche tu sei un web designer e vuoi realizzare la tua applicazione mobile da distribuire nei vari stores, forse sarai interessato al mio e-book: HTML Mobile Accelerato.

Grazie ad esso verrai a conoscenza di tutte quelle tecniche che renderanno la tua applicazione mobile fluida e reattiva come quelle native.

HTML-mobile-accelerato-ebook-cover

Giacomo Freddi

Web Designer Freelance e Developer, si occupa del design e dello sviluppo di applicazioni web dal 2008, come molti freelance è abituato a gestire più ruoli e spaziare su più campi, ma la sua passione principale è quella della creazione di interfacce front-end e back-end utilizzando codice html5 e css3. Adora usare pattern MVC per i suoi Javascript.