Nella realizzazione di HTML5 Mobile App in CSS3 e Javascript numerosi sono i controlli che possono essere ricreati in modo da sviluppare prodotti che si avvicinano più possibile alle applicazioni native.

Negli articoli precedenti mi sono soffermato più volte sull’importanza delle performance di animazioni CSS3 per quanto riguarda le interfacce web, soprattuto per quelle destinate a girare su dispositivi mobile.

Utilizzando questo tipo di animazioni, che forzano la creazione di livelli grafici da essere poi inviati alla GPU velocizzando il processo di rendering, è possibile riprodurre la maggior parte dei componenti presenti in app native in modo fluido e performante.

A questo proposito ti consiglio di leggere:

• Performance CSS3 – Consigli per ottimizzare le prestazioni di rendering con i livelli grafici

Con i CSS3 è possibile riprodurre per esempio elementi come slide menu (ecco un tutorial su come crearne uno), tab bar, modal alert, popover ecc..

Mobile Action Sheet con Animazioni CSS3

In questo articolo voglio mostrarti come realizzare un modal action-sheet sfruttando animazioni CSS3 performanti, che agiscono su determinati attributi in modo da sfruttare la tecnica della composizione dei livelli grafici.

In altre parole ricreeremo una modal dialog con dei pulsanti al suo interno che compare dal fondo dello schermo.

Per quanto riguarda gli stili dei pulsanti ci serviremo di quelli forniti dal framework Twitter Bootstrap 3, che con i suoi gruppi di pulsanti verticali si avvicina molto ai pulsanti che si trovano nel mobile action sheet del sistema operativo iOS7.

Qui a fianco uno screenshot che mostra il classico esempio di un mobile action sheet nativo durante l’utilizzo dall’applicazione “Mail” di iOS7

Il markup HTML

Dopo aver incluso nel documento le risorse di cui ci serviremo, come appunto il framework Twitter Bootstrap, Modernizr ed il solito jQuery, andiamo a definire il markup HTML:

<nav> <!-- tabbar -->
</nav>
<article>  <!-- corpo documento -->

	<h1>Action Sheet con animazioni CSS3</h1>

	<div class="text-center">
		<button id="start"  type="button" class="btn btn-default">Mostra action sheet</button>
	</div>		

</article>

<div class="action-sheet"> <!-- contenitore action sheet -->

    <div></div> <!-- l'overlay dell'action-sheet -->
    <section>   <!-- il contenitore dei pulsanti -->

    </section>
</div>

 

Oltre ai tag <nav>  ed <article>, che rappresentano rispettivamente la tabbar ed il corpo del documento, inseriamo il codice HTML per definire gli elementi DOM che rappresentano l’intero action sheet. Abbiamo un contenitore principale (con classe .action-sheet) all’interno del quale si trovano una <div> ed un elemento <section>, il primo per l’overlay trasparente di sfondo, mentre il secondo per il contenitore dei pulsanti.

Vediamo ora come scrivere il markup dei pulsanti, utilizzando gli stili di Bootstrap:

<div class="row">
    <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 btn-group-vertical">
        <button type="button" class="btn btn-default">Pulsante 1</button>
        <button type="button" class="btn btn-default">Pulsante 1</button>
        <button type="button" class="btn btn-default">Pulsante 1</button>
    </div>
</div>
<div class="row">
    <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3">
        <button type="button" class="btn btn-danger btn-block cancel">Chiudi</button>
    </div>
</div>

 

Abbiamo organizzato il gruppo di pulsanti in una prima <div> con classe .row, in modo da rendere poi responsive gli elementi interni utilizzando le classi del sistema a griglia di Bootstrap (piena larghezza nel caso di smartphone, 6 colonne centrate nel caso di tablet e dispositivi desktop).

Per riprodurre poi i pulsanti abbiamo utilizzato le solite classi .btn e .btn-[tipo-di-stile] al fine di definire quale tipo di pulsante utilizzare. Nel caso del gruppo di pulsanti superiore ci siamo serviti della classe .btn-group-vertical che come accennato in precedenza raggruppa verticalmente i pulsanti in modo molto analogo a quello di iOS7.

Il foglio di stile CSS3

Vediamo ora come servirci di animazioni CSS3 performanti per realizzare gli effetti desiderati.

Il primo effetto sarà applicato alla <div> che rappresenta l’overlay di sfondo, il quale dovrà apparire in dissolvenza, mentre il secondo sarà applicato al contenitore dei pulsanti (ovvero l’elemento <section>), che dovrà fare la sua comparsa dal fondo dello schermo. 

Come prima cosa posizioniamo i due elementi utilizzando l’istruzione position:absolute e le relative coordinate:

.action-sheet {
	/*
		finchè non viene avviata l'animazione lasciamo la proprietà "display: none"		
		in modo che l'elemento non vada ad interferire con il resto del DOM del documento
		(omettendo questa istruzione, questo elemento non sarebbe comunque visibile,
		ma allo stesso la sua presenza tempo non permetterebbe di interagire con gli altri elementi)
	*/
    display: none;	  
}

/*overlay di sfondo */

.action-sheet > div{
	/*
		impostiamo le dimensioni e ed il posizionamento 
		assoluto dell'overlay in modo da coprire tutto il documento
	*/
    position:absolute;
    top:0;right:0;
    left:0;bottom:0;
    /*
	    per dare la trsparenza all'overlay utilizziamo l'attributo 'rgba' 
	    che ci permette appunto di impostare un valore di trasparenza
    */
    background: rgba(0,0,0, 0.5);    
}

/* contenitore pulsanti */
.action-sheet > section{

	/*
		anche qui impostiamo il posizionamento assoluto in modo 
		da poter facilmente posizionare il contenitore in fondo allo schermo	
	*/		

    position:absolute;
    left:0;
    right:0;
    bottom:0;
    background: none;
    padding: 0 10px;
}

Poi passiamo ad impostare il punto focale dell’esperimento, ovvero il funzionamento dell’effetto:

.action-sheet > div{    
    /* trasparenza iniziale pari a 0, in modo da visualizzare l'overlay in dissolvenza */
    opacity:0;
    /* 
    	impostiamo l'effetto tramite la proprietà transition 
    	utilizzando l'opacity, attributo performante, per 
    	creare un effetto a comparsa sulla trasparenza
    */
    -webkit-transition: opacity .15s;
    -moz-transition: opacity .15s;
    transition: opacity .15s;
}

/* contenitore pulsanti */
.action-sheet > section{    
    /* 
    	impostiamo la proprietà transitio per l'attributo "transform",
    	che forza la creazine dei livelli grafici da inviare alla GPU 
    	e rende più fluida l'animazione	    
    */	
    -webkit-transition: -webkit-transform .3s;
    -moz-transition: -moz-transform .3s;
    transition: transform .3s;

    /*
	    inzialmente impostiamo il la transform del contenitore in modo che 
	    prima dell'avvio dell'effetto si trovi al di fuori dello schermo,
	    mediante il parametro "Y" della proprietà translate3d
    */
    -webkit-transform: translate3d(0, 110%, 0);
    -moz-transform: translate3d(0, 110%, 0);
    transform: translate3d(0, 110%, 0);
}

 

Riassumento il discorso,  per ricreare gli effetti abbiamo attribuito alla proprietà transition i parametri opacità (per l’overlay) e tranform (per il contenitore dei pulsanti) facendo in modo che quando essi vengono modificati,  di conseguenza viene avviata anche l’animazione di comparsa. In particolare, andiamo a modificare quei parametri nel caso in cui alla div con classe .action-sheet presenti anche la classe di stile “open”.

(La div .action-sheet serve quindi solamente ad attivare in un colpo solo le animazioni applicate agli elementi che si trovano al suo interno.)

Il codice Javascript

Abbiamo detto che per attivare l’effetto dobbiamo solamente aggiungere la classe “open” alla div .action-sheet. Come al solito per farlo ci serviamo del Javascript e procediamo in questo modo:

/* Grazie a modernizr riprendo il nome dell'evento di fine animazione, che cambia a seconda del browser */

    	var endTransitionName = {
			'WebkitTransition' : 'webkitTransitionEnd',
			'OTransition' : 'oTransitionEnd',
			'msTransition' : 'MSTransitionEnd',
			'transition' : 'transitionend'
		};
		var transitionEventName = endTransitionName[ Modernizr.prefixed( 'transition' ) ];

	    $(function(){

	    	var actionSheet = $(".action-sheet");

	    	$("#start").on("click", function(){		    	
		    	actionSheet.show(); //equivalente ad impostare la proprietà "display" = "block" 
		        setTimeout(function () {
		            actionSheet.addClass("open"); //aggiungiamo la classe 'open' per avviare l'aniamzione
		        }, 10);		    	
	    	});	 

	    	$(".cancel").on("click", function(){	    
	    		//rimuoviamo la classe che scatena l'effetto, in modo da ritornare allo stato di partenza
	    		//all'evento di fine della transition reipostiamo tramite jQuery la propretà "display" = "none", 
	    		//che era quella dello stato iniziale        
		        actionSheet.removeClass("open").one(transitionEventName, function () {
		            actionSheet.hide();
		        });		    	
	    	});	

	    });

Al click del pulsante con id “start” rendiamo visibile tutto il markup del nostro componente tramite il metodo .show() di jQuery (che equivale ad impostare la proprietà CSS “display: block” ), poi con un ritardo di 10 millisecondi (piccolo hack per “far passare qualche istante di il tempo” dopo il rendering del markup), aggiungiamo la classe “open“, avviando l’effetto a comparsa.

Al contrario, nel momento in cui l’utente effettua il click (o tap, se si tratta di mobile) sul pulsante di chiusura .cancel, rimuoviamo la classe “open” e, nel momento in cui l’animazione giunge al termine, reimpostiamo la proprietà “display: none” per la div .action-sheet, in modo da nasconderla di nuovo.

Come è possibile vedere dal codice, per riprendere il nome giusto dell’evento di fine animazione in base al browser utilizzato dall’utente, ci siamo serviti di Modernizr, ed in particolare del metodo .prefixed(”transition’).

Eccoci quindi al risultato finale: come puoi vedere il movimento risulta fluido e piacevole, anche se lo si visualizza da un dispositivo mobile.

Conclusioni

Con questo ennesimo esempio ti ho voluto dimostrare come sia possibile servirsi della composizione dei livelli grafici e dell’accelerazione hardware per sfruttare la GPU al fine di realizzare interfacce mobile, dove è possibile avere animazioni più lente e caratterizzate da numerosi sfarfalli, se non vengono utilizzate le giuste proprietà.

Per vedere la differenza tra un’animazione fluida ed una con sfarfallii, ti consiglio di provare la demo di questo tutorial in cui ho messo a confronto l’effetto di riempimento di due progressbar:

• Come realizzare una progress bar CSS3 per una HTML Mobile App

Recentemente è stata rilasciata la versione definitiva del tanto atteso sistema operativo iOS 7  targato Apple, con il suo design flat, le nuove icone e tutto il bagaglio di innovazioni presentate da Tim Cook durante il Keynote tenutosi a Settembre 2013. Uno degli aspetti principali che caratterizza il design si iOS 7 è determinato dall’uso costante dell’effetto blur, impiegato sui vari background che compongono l’interfaccia utente.

In questo articolo cercheremo di riprodurre questo effetto tramite l’esclusivo utilizzo di funzioni CSS3 avanzate, senza usare alcun tipo di immagine. Il risultato dell’esperimento sarà quello di creare una pagina con una barra di navigazione contenente un pulsante che servirà ad attivare il nostro overlay, ed un altro, contenuto all’interno dello stesso overlay, che avrà il compito di disattivarlo. L’obiettivo di quest’ultimo è quello di apparire con effetto slide sopra il contenuto del documento.

Il markup HTML

Come primo passaggio creiamo il nostro markup html, comprensivo della barra di navigazione, del contenuto della pagina, e della div di overlay:

<nav>
		<h1 class="title">Overlay Blur effect</h1>
		<button class="open-overlay">Show</a>
	</nav>
	<article>

		<ul class='list'>
			<li class="show-detail">
				<img src="img/1.jpg" height="80px">
				<div>
					<h3>Lorem ipsum</h3>
					<h4>Radioactive</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
				</div>
			</li>
			<li class="show-detail">
				<aside>
					<img src="img/2.jpg" height="80px">
				</aside>
				<div>
					<h3>Lorem ipsum</h3>
					<h4>Radioactive</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
				</div>
			</li>
			<li class="show-detail">
				<aside>
					<img src="img/3.jpg" height="80px">
				</aside>
				<div>
					<h3>Lorem ipsum</h3>
					<h4>Radioactive</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
				</div>
			</li>
			<li class="show-detail">
				<aside>
					<img src="img/4.jpg" height="80px">
				</aside>
				<div>
					<h3>Lorem ipsum</h3>
					<h4>Radioactive</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
				</div>
			</li>
		</ul>

	</article>
	<section class="overlay">

		<button class="close-overlay">Hide</a>

	</section>

 

Per fare ciò abbiamo utilizzato elementi html5 come nav ed article  e section, ma è possibile utilizzare  anche altri elementi con attributo css “display:block“. Abbiamo inoltre inserito all’interno del tag article, una lista con stili simili ad iOS7 (giusto per rimanere nel tema).

Il foglio di stile CSS

Prima di arrivare al passaggio più importante, ovvero attribuire ai vari elementi gli stili necessari per rendere possibile l’effetto overlay con blur, cerchiamo di dare alla pagina un aspetto che si avvicini più possibile alla grafica di iOS 7:

body, html{
	height: 100%;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 100;
	overflow: hidden;
}

nav {
  top: 0;
  height: 44px;
  padding:0;	  	  
  background-color: #F7F7F7;
  border-bottom: 1px solid #A7A7AA;	  	  
  position: relative;  
}	
nav .title {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  margin:0;
  width: 100%;
  font-size: 18px;
  font-weight: 100;
  line-height: 44px;
  color: #333;
  text-align: center;
  white-space: nowrap;
}

nav .title + button {
  position: absolute; 
  top: 5px;
  right: 5px;
  z-index: 10; 

  border-radius:4px;
  padding:6px 8px;
  border:none;	
  color: #397AFC;
  background: transparent;	  
}
nav .title + button:active{
	color: #7BB6FB;
}

article {
  position: fixed;
  top: 45px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  background: #EFEFF4;
  padding-top:20px;
}

.list {
   list-style: none;
   margin: 0 0 10px 0;
   padding: 0;
   border-top: solid 1px #c8c8c8;
   border-bottom: solid 1px #c8c8c8;
   background-color: #fff;
   overflow: hidden;
   width: 100%;
}

.list > li {
   padding: 13px 15px 13px 15px;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   transition: all .3s ease-out;
   position: relative;
   background-color: #fff;
   font-size: 12pt;
}
.list img{
	float:left;
	margin: 0 10px 10px 0;
}
.list h3,
.list h4,
.list p{
	font-size: 0.9em;
	margin:5px 0;
}

.list > li::before {
   content: '';
   display: block;
   position: absolute;
   bottom: 0px;
   left: 15px;
   right: 0px;
   border-bottom: solid 1px #c8c8c8;
}

.list > li.show-detail::after {
   content: 'i';
   display: block;
   height: 20px;
   width: 22px;
   border-radius: 20px;
   border: solid 1px #007aff;
   color: #007aff;
   font: bold 14px/0 'Times', serif;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 10px 8px;
   position: absolute;
   top: 10px;
   right: 15px;
}

Applicando questa porzione di codice abbiamo attribuito al documento il font “HelveticaNeue Light“, tipico del flat design targato Apple, abbiamo posizionato e “stilizzato” la barra di navigazione e gli elementi in essa contenuti (come titolo e pulsante d’azione) ed infine abbiamo posizionato il corpo della pagina, costituito appunto dal tag “article“.

Passiamo invece agli stili CSS che caratterizzano il risultato del nostro esperimento:  aggiungiamo la proprietà “transition” all’elemento article, specificando che sia applicata all’attributo filter.

article {
  position: fixed;
  top: 45px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  background: #EFEFF4;
  padding-top:20px;

  -webkit-transition: -webkit-filter .15s ease;
          		  transition: filter .15s ease;
}

 

Poi aggiungiamo un blur di 15 px al contenuto della pagina nel caso in cui il body abbia la classe “open-overlay“, rimuovendolo invece nel caso in cui abbia la classe “close-overlay“.

body.open-overlay article{
	-webkit-filter:blur(15px);
	filter: blur(15px);
}

body.close-overlay article{
	-webkit-filter:none;
	filter:none;
}

 

Ora l’elemento più importante: l’overlay. Attribuiamo al nostro overlay (tag section) una posizione assoluta nei confronti del documento e posizioniamolo in modo tale che non copra la barra di navigazione, poi aggiungiamo le altre proprietà fondamentali:

1. L’attributo visibility:hidden, perchè nello “stato normale” l’overlay non deve essere visibile
2. L’attributo backface-visibility:hidden (nei suoi adattamenti per la compatibilità dei vari browser): con il quale miglioriamo le prestazioni di rendering nel caso di trasformazioni CSS prevenendo quest’ultimo dall’essere eseguito per la parte posteriore dell’elemento
3. L’attributo transform:translate3d(0,0,0) con il quale miglioriamo la fluidità della nostra animazione “forzando” l’utilizzo della GPU
4. L’attributo “animatior“, con il quale comunichiamo all’overlay quale genere di animazione eseguire, quanto tempo deve durare, e che tipo di “andamento” eseguire (lineare, swing ecc.)
5. L’istruzione “keyframe“, con la quale definiamo le animazioni

section {
  position: absolute;
  left: 0;
  top: 44px;	  
  right: 0;	
  bottom:0;  
  background-color: rgba(156,159,164,.5);	  
  padding:20px;
  text-align: center;

  visibility: hidden;

  /* migliora le prestazioni prevenendo il render della parte 'posteriore' dell'elemento */
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   /* accelerazione hardware */
   -webkit-transform: translate3d(0,0,0);
   -moz-transform: translate3d(0,0,0);
   -ms-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);			   
}	

body.open-overlay section{
	-webkit-animation: showFromBottom .25s ease both;
	-moz-animation: showFromBottom .25s ease both;
	animation: showFromBottom .25s ease both;

	visibility: visible;
}

body.close-overlay section{
	-webkit-animation: hideToBottom .25s ease both;
	-moz-animation: hideToBottom .25s ease both;
	animation: hideToBottom .25s ease both;
}

/* definizione delle animzioni dell'overlay  */

	@-webkit-keyframes showFromBottom {
		from { -webkit-transform: translateY(100%); }
	}
	@-moz-keyframes showFromBottom {
		from { -moz-transform: translateY(100%); }
	}
	@keyframes showFromBottom {
		from { transform: translateY(100%); }
	}

	@-webkit-keyframes hideToBottom {
		to { -webkit-transform: translateY(100%); }
	}
	@-moz-keyframes hideToBottom {
		to { -moz-transform: translateY(100%); }
	}
	@keyframes hideToBottom {
		to { transform: translateY(100%); }
	}

Apro una piccola parentesi in merito: devo dire che mi piace molto utilizzare la terza delle proprietà elencate, che permette, nel caso di dispositivi mobile, di raggiungere o perlomeno di avvicinarsi alle prestazioni delle applicazioni native.

Tornando a noi, vediamo come nel caso in cui il body abbia la classe “open-overlay” o “close-overlay“, il tag section debba eseguire le due animazioni rispettivamente di comparsa e scomparsa dichiarate sotto il codice “keyframes” : showFromBottom e hideToBottom. Abbiamo inoltre modificato l’attributo “visibility:visible” per rendere visibile il pannello.

Il risultato dovrebbe quindi essere il seguente:

1. Nel caso di un body con classe “open-overlay” dovremmo vedere l’animazione dell’overlay assieme a quella del blur del documento.
2. Nel caso di un body con classe “close-overlay” dovremmo vedere esattamente le due animazioni opposte, per poi tornare allo stato iniziale.

Passiamo quindi all’ultima parte.

Il codice Javascript

Per scrivere meno righe di javascript, incorporiamo nel documento due librerie: jQuery e Modernizr, rispettivamente per effettuare il bind degli eventi del click dei pulsanti di apertura e chiusura, e per ricavare il nome dell’evento di fine animazione, che varia a seconda del browser.

var endAnimationName = {
	'WebkitAnimation' : 'webkitAnimationEnd',
	'OAnimation' : 'oAnimationEnd',
	'msAnimation' : 'MSAnimationEnd',
	'animation' : 'animationend'
};
var animationName = endAnimationName[ Modernizr.prefixed( 'animation' ) ];

$(function(){
   //bind dell'evento click sul pulsante di attivazione 
   $("button.open-overlay").on("click", function(){
	   $("body").addClass("open-overlay");
   });
   $("button.close-overlay").on("click", function(){
	   $("body").addClass("close-overlay").on(animationName, function(){				   
		   $(this).off(animationName)
		   .removeClass("open-overlay close-overlay");
	   });
   });
});

Alla fine dell’animazione di chiusura, togliamo al body entrambe le classi “open-overlay”  e “close-overlay”, per ritornare così allo stato di partenza.

Conclusioni finali

Purtroppo questo esperimento non è ancora ottimizzato con tutti i browser (per esempio nel caso di Firefox non è possibile applicare l’effetto blur al contenuto della pagina con il semplice attributo “filter:blur” ma solo servendosi degli effetti svg) e inoltre si tratta in fin dei conti di un workaround, in quanto l’effetto sul documento non è scaturito dalla sovrapposizione dell’overlay bensì da uno stile completamente separato. Tuttavia spero che questo tutorial ti sia d’aiuto per imparare nuove regole CSS3 e che magari potrai utilizzarlo nel tuo prossimo progetto!

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.

I am text block. Click edit button to change this text.