Twitter Bootstrap rappresenta un’ottima risorsa per tutti coloro che operano nell’ambito del web design, ed in rete si possono trovare migliaia di siti web e applicazioni realizzate con questo utilissimo framework. Se però da una parte fa senz’altro comodo potersi appoggiare ad un sistema solido ed aggiornato, crossbrowser e responsive, dall’altra è altrettanto vero che, in un mare di progetti “Bootstrap-based“, diventa  necessario distinguersi dagli altri.

Uno dei modi più utili per farlo è quello di implementare delle funzionalità originali sui componenti dell’interfaccia. In un precedente articolo ti ho mostrato come realizzare uno slide menu originale con animazioni CSS3, con tanto di progressive enhancement, ovvero quella tecnica che permette di applicare alle funzionalità dei componenti un miglioramento progressivo a seconda del browser, tramite CSS3:

• CSS3 slide panel: tutorial su come realizzare un menu stile mobile

Twitter Bootstrap Search Box

In questo articolo ti voglio mostrare come rendere originale ed accattivante l’esperienza di ricerca all’interno di un sito web o applicazione, sia essa desktop o mobile. Ciò che infatti realizzeremo è un search box con effetto slide-down, la cui caratteristica principale è quella di essere totalmente responsive, in quanto ci serviremo di Twitter Bootstrap.

Il risultato dell’esperimento potrà essere pertanto implementato anche su applicazioni Mobile, anche per il fatto che utilizzeremo delle animazioni CSS3 altamente performanti per i dispositivi che le supportano, mentre ricorreremo a quelle meno performanti nel caso di browser più datati.

---

Realizzare un search box #crossbrowser e #responsive con #TwitterBootstrap #webdesign
Click To Tweet

---

L’obiettivo è quello di far comparire dall’alto il campo di ricerca nel momento in cui viene cliccata l’apposita icona, in modo da coprire completamente la barra di navigazione. Quando si verifica l’evento “blur” del campo richiameremo invece l’effetto contrario, quello per nascondere il form.

A questo proposito ti consiglio di leggere:

• Performance CSS3: consigli per ottimizzare le prestazioni
• Web e mobile app fluide con Hardware Acceleration

Il markup HTML

Il codice HTML utilizzato per i vari elementi DOM è relativamente semplice; in particolare non facciamo altro che prelevarlo dalla documentazione del sito ufficiale di Twitter Bootstrap in modo da ricreare la navbar, applicando qualche piccola modifica:

<!-- menu di navigazione -->

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">	

  <div class="container-fluid">
    <div class="navbar-header">        

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="navbar-brand" href="http://www.upcreative.net">upCreative.net</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Profile</a></li>
        <li>
        	<a href="#" id="search-button">
            	<i class="fa fa-search fa-lg"></i> 
	        <span>Cerca</span>
        	</a>
        </li>
      </ul>          
    </div>
  </div>

  <!-- il form di ricerca, inizialmente nascosto -->

  <form class="navbar-form" action="#">
    <input type="search" placeholder="Cerca...">
    <a href="#" id="close-button"><i class="fa fa-times fa-lg"></i></a>
  </form>
</nav>

Ci serviamo quindi del tag <article> per rappresentare il contenuto della pagina (o applicazione):

<!-- Contenuto pagina web --> 

<article class="text-center">

	<h1>Twitter Bootstrap search box con animazioni CSS3</h1>	

	<a href="http://www.upcreative.net/" class="btn btn-primary btn-lg">Vai all'articolo del tutorial <i class="fa fa-chevron-right"></i></a>

	<p>
		Guarda la demo in un dispositivo mobile per poter poter visualizzare al meglio le 
		performance raggiungibili con la tecnica dell'<strong>accelerazione hardware</strong>.
	</p>

	<p style="margin-top:30px;">
		oppure consulta altri tutorial su upCreative.net:
	</p>

	<a href="http://www.upcreative.net/tutorial-css3-e-javascript-per-web-designers/" class="btn btn-primary"><i class="fa fa-globe"></i> upCreative.net</a>

</article>

Per quanto riguarda le icone di ricerca e di chiusura abbiamo usato quelle del framework Fontawesome, icon-font appositamente creato per Twitter Bootstrap.

Il codice CSS3

Vediamo ora il codice per il foglio di stile:

/* stili del form della navbar */
.navbar-form{

	/*
		posizioniamo il form di ricerca in modo assoluto ed impostiamo
		larghezza ed altezza al 100% in modo da coprire completamente la 
		navbar che lo contiente		
	*/
	position: absolute;
	padding:0;
	left:0;
	top:0;
	width:100%;
	height:70px;
	margin: 0;
}

Abbiamo impostato la grandezza del form che contiene il campo di ricerca (classe .navbar-form) in modo che avesse le stesse dimensioni della navbar, per far sì che quest’ultima venga interamente coperta al momento dell’azione di ricerca.

Aggiungiamo ora la definizione delle modalità di animazione:

.navbar-form{	
	/* 
		impostiamo ad all l"attributo scantenante" per l'effetto 
		di transizione, in modo da scatenarlo sia se viene modificato il 
		valore della proprietà 'top', che quello della proprietà 'transorm'.
		Grazie alla proprietà 'transform sarà' possibile rendere l'effetto 
		fluido e performante anche per i dispositivi mobile, 
		forzando la creazione dei layers grafici.
	*/
	-webkit-transition: all .3s;
	   -moz-transition: all .3s;
	   	-ms-transition: all .3s;
		 -o-transition: all .3s;
		 	transition: all .3s;

	/*
		inizialmente nascondiamo fuori dallo schermo il form di ricerca, 
		in modo che sia traslato negativamente in verticale dello stesso
		numero di pixek che compone l'altezza della navbar 
	*/
	-webkit-transform: translate3d(0,-70px,0);
	   -moz-transform: translate3d(0,-70px,0);
	    -ms-transform: translate3d(0,-70px,0);
	     -o-transform: translate3d(0,-70px,0);
	        transform: translate3d(0,-70px,0);
}

Aggiungiamo una piccola porzione di codice per “ripiegare” sull’utilizzo della proprietà “top“, al fine di scatenare l’effetto di entrata nel caso in cui il browser del visitatore non supporti la proprietà “translate” (poco performante perché implica la ripetizione di gran parte del processo di rendering):

/*
se il browser non supporta la proprietà translate, allora impostiamo il
valore top negativo, dello stesso numero di pixel dell'altezza della navbar
*/
body.without-translate .navbar-form{
    top: -70px;
}

La classe .with-translate verrà aggiunta al body della pagina utilizzando Modernizr; lo vedremo analizzando il codice Javascript.

Passiamo quindi a definire gli stili per le proprietà grafiche dell’input di ricerca e quelle per il posizionamento dell’icona di chiusura:

/*
	impostaiamo gli stili per l'elemento input. In particolare facciamo in modo 
	che il campo di testo abbia le stesse dimensioni dell'elemento form che lo contiene
*/
.navbar-form input[type='search']{
	outline: 0;	
	width: 100%;
	height:100%;
	font-size: 24px;
	color:#F4F4F4;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	padding:11px 15px;
	padding-right: 35px; /*aumentiamo il padding per "fare spazio" al pulsante di chiusura del form	*/
	background: #000;
	border:0;	
}

/*
	impostiamo in modo assoluto il pulsante di chiusura del 
	form di ricerca in modo che sia posizionato in fondo a destra rispetto 
	al conteitore e che stia sopra il campo di ricerca
*/

#close-button{
	position: absolute;
	right:18px;
	top:24px;
	color: #FFF;
}

Infine facciamo in modo che, nel momento in cui viene aggiunta la classe .open al form di ricerca, siano modificate le “proprietà scatenanti” che avviano l’effetto, secondo quanto definito precedentemente:

/*
definiamo la classe per la visualizzazione del form di ricerca	
*/
.navbar-form.open{	
	/*
	nel momento in cui questa classe viene aggiunta al form,
	andiamo a modifica l'attributo scatenante definito in precedenza (transform)
	per avviare l'aniamzione
	*/	
	-webkit-transform: translate3d(0,0,0);
	   -moz-transform: translate3d(0,0,0);
	    -ms-transform: translate3d(0,0,0);
	     -o-transform: translate3d(0,0,0);
	        transform: translate3d(0,0,0);

}

/*
se il browser non supporta la proprietà translate, allora 
attiviamo l'effetto agendo sulla proprietà 'top'.
*/

body.without-translate .navbar-form.open {
    top: 0;
}

 

Il codice Javascript

Come al solito definiamo subito, tramite Modernizr,  il nome dell’evento di fine transition in modo da eseguire la nostra funzione javascript nel momento in cui l’animazione di apertura giunge al termine:

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

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

Per avere maggiori informazioni sulla gestione degli eventi di effetti realizzati tramite le proprietà transition e animation, ti consiglio di leggere questo articolo:

• Modernizr e CSS3: gestire gli eventi di fine animazione e transizione con javascript

Aggiungendo ora la classe .without-translate al body, nel caso in cui non sia presente il supporto per la proprietà transform:

/* 
    grazie a modernizr, controllando le classi del tag HTML 
    possiamo sapere se il browser supporta determinate funzionalità        
*/
var supportCssTransforms = $("html").hasClass("csstransforms3d"),
    supportCssTransitions = $("html").hasClass("csstransitions");

/*
    se il browser non supporta la prop. 'transform' aggiungiamo la classe 'without-translate' al body, 
    in modo da poter differenziare la modalità d'effetto tramite CSS
*/
if(!supportCssTransforms){
    $("body").addClass("without-translate");
}

Infine gestiamo gli eventi di click e blur  per pulsanti e campo di ricerca:

/*
	definiamo gli elementi sui quali agiremo
*/
var navForm = $("nav .navbar-form"), 
	input = navForm.find("input[type='search']"),
	openBnt = $("#search-button"),
	closeBtn = $("#close-button");

openBnt.on("click", function(e){
	e.preventDefault();
	//alla fine dell'effetto di transizione richiamiamo il focus sul campo di testo		    	
	navForm.addClass("open").one(transitionEventName, function(){ 	   
    	   input.focus();
	});
        /* 
        se il browser non supporta le transition CSS3 allora l'evento di fine animazione non si verificherà, 
        pertanto richiameremo il focus sul campo di ricerca subito dopo aver aggiunto 
        la classe 'open' al form
        */
        if(!supportCssTransitions)
	   input.focus();

});

/*
	nel momento in cui si verifica l'evento blur, rimuoviamo la classe "open"
	dal form in modo da scatenare l'animazione con effetto contrario (quella
	che nasconde appunto il form)
*/	    	
input.on("blur", function(){ 		    	
	navForm.removeClass("open");
});

/*
	al click dell'icona di chiusura forziamo il blur del campo per scatenare il
	conseguente effetto di chiusura
*/
closeBtn.on("click", function(e){
	e.preventDefault(); 		    	
	input.trigger("blur");
});

Ed ecco finalmente il risultato finale:

Conclusioni

Con questo tutorial spero di averti dimostrato che servirsi di animazioni CSS3 performanti è un’ottimo metodo per rendere originale un sito web e distinguerlo dagli altri, oppure per implementare dei componenti fluidi nelle proprie applicazioni mobile sviluppate in HTML5, CSS3 e Javascript. Così facendo possiamo realizzare prodotti le cui prestazioni si avvicinano il più possibile a quelle di applicazioni native.

---

Realizzare un search box #crossbrowser e #responsive con #TwitterBootstrap #webdesign
Click To Tweet

---

L’impiego della tecnica del miglioramento progressivo permette inoltre di applicare il nostro effetto a tutti i tipi di browser, spaziando da quel più vecchi quelli a quelli di ultima generazione.

E tu? Utilizzerai questa tecnica nei tuoi progetti? Lascia pure un tuo commento per qualunque dubbio o perplessità, o per suggerire delle funzionalità aggiuntive.

Premessa

Il risultato è ottimizzato per dispositivi mobile e le tecniche utilizzate (come l’accelerazione hardware e la composizione dei livelli grafici)  sono suppurate solo dai browser di ultima generazione. Pertanto, se vuoi integrare il menu in un sito web, è opportuno attuare un’adeguata tecnica di Progressive Enhancement.

Per approfondire il discorso del Progressive Enhancement e per vedere come realizzare uno slide menu ottimizzato su tutti i browser, ti consiglio di leggere questo post:

• CSS3 slide panel: tutorial su come realizzare un menu stile mobile

Il markup HTML

Come primo passo impostiamo il markup HTML del documento, il quale prevede principalmente due elementi essenziali: il contenitore del menu (con al suo interno una lista di 4 voci) e quello dei contenuti dell’applicazione, rispettivamente rappresentati da un elemento <nav>  con classe ‘menu’, e da un <div> con classe ‘content-wrapper’.

<nav class="menu">
    <ul>	    
    	<li>
	    	<a href="#">
	    		<i class="fa fa-search fa-2x"></i>
	    		<span>Ricerca</span>
	    	</a>
    	</li>
    	<li>
	    	<a href="#">
	    		<i class="fa fa-star fa-2x"></i>
	    		<span>Preferiti</span>
	    	</a>
	    </li>
    	<li>
	    	<a href="#">
	    		<i class="fa fa-users fa-2x"></i>
	    		<span>Amici</span>
	    	</a>
	    </li>
    	<li>
	    	<a href="#">
	    		<i class="fa fa-cog fa-2x"></i>
	    		<span>Impostazioni</span>
	    	</a>
    	</li>	    
    </ul>

</nav>

<!-- contenuto dell'applicazione -->

<div class="content-wrapper">

	<section class="page"> <!-- pagina (o view dell'applicazione) -->

		<header> <!-- header della pagina -->
			<button class="toggle-menu"><i class="fa fa-bars fa-lg"></i></button>
			<h1 class="title">HTML Mobile App</h1>

		</header>
		<article class="text-center">

			Conenuto pagina	

		</article>
	</section>

</div>

Per realizzare il nostro HTML Mobile Slide Menu facciamo in modo di posizionare entrambi gli elementi DOM (‘.menu‘ e ‘.content-wrapper‘) tramite la proprietà position:absolute, per sovrapporre il contenitore dell’applicazione al menu.

Poi, avviando l’effetto slide, il contenitore sarà traslato orizzontalmente dello stesso numero di pixel che compongono la larghezza del menu (260px).

Andiamo quindi a vedere il codice CSS3 necessario per raggiungere tale obiettivo.

Gli stili CSS3

Innanzitutto posizioniamo i due elementi, attribuendo al contenitore uno z-index superiore a quello del menu:

nav.menu {
    position: absolute;
    left: 0;
    width: 260px;
    height: 100%;
    top: 0;
    z-index: 1;	    
    background: #B8BDC5;
}
.content-wrapper{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
    background-color: #4A5A6E;	    
}
/*
	ecco gli stili per il posizionamento di un'ipotetica pagina (o view)	
	che si trova all'internod el contenitore su cui effettueremo l'effeto slide	
*/
.content-wrapper > section.page{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
}

Attiviamo l’effetto slide-right, utile per rivelare il menu, impostando il foglio di stile in modo che basti aggiungere una classe all’elemento DOM:

.content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
    background-color: #4A5A6E;

    /*
	impostiamo l'effetto di transizione sul contenitore della pagina/delle pagine del documento	    
	in modo da forzare la creazione dei layer grafici (accelerazione hardware)
	e rendere l'animazione più performante;
	il tutto riportando tutti i prefix per la compatibilità browser
    */

    -webkit-transition: -webkit-transform .5s ease-in-out;
    	  -moz-transition: -moz-transform .5s ease-in-out;
    	    -ms-transition: -ms-transform .5s ease-in-out;
    	      -o-transition: -o-transform .5s ease-in-out;
    	            transition: transform .5s ease-in-out;

}			

.content-wrapper.open-left {

	/*
		nel caso in cui venga aggiunta la classe 'open-left'
		avviamo l'effetto transition modificando la prop. transform
		e traslando in senso positivo tutto il contenuto di 260px,
		al fine di rivelare il menu nascosto sotto
	*/

    -webkit-transform: translate3d(260px, 0, 0);
       -moz-transform: translate3d(260px, 0, 0);
        -ms-transform: translate3d(260px, 0, 0);
         -o-transform: translate3d(260px, 0, 0);
            transform: translate3d(260px, 0, 0);

}

Agendo sulla proprietà di stile transition, richiamiamo, tramite il transform, un tipo di effetto che forza l’accelerazione hardware e quindi la composizione dei livelli grafici (il cui rendering è delegato alla GPU), alleggerendo così i carichi di lavoro e favorendo la fluidità dell’animazione.

Facciamo quindi la stessa cosa per gli elementi della lista del menu, che devono essere traslati anch’essi orizzontalmente e mostrati con una leggera dissolvenza:

nav.menu ul li{
	display: block;
	margin-bottom: 10px;  

	opacity: 0.8;  	 	

    -webkit-transform: translate3d(-260px, 0, 0);
       -moz-transform: translate3d(-260px, 0, 0);
        -ms-transform: translate3d(-260px, 0, 0);
         -o-transform: translate3d(-260px, 0, 0);
            transform: translate3d(-260px, 0, 0);

}

/* 
facciamo in modo che le <li> della navigazione siano animate solo nel caso 
in cui  l'elemento '.menu' abbia la classe 'animate li';
questo ci permette di animare ogni <li> solo quando il menu viene mostrato e 
non quando viene chiuso
*/

nav.menu.animate-li ul li{
    -webkit-transition: all .5s ease-in-out;
       -moz-transition: all .5s ease-in-out;
    	-ms-transition: all .5s ease-in-out;
    	 -o-transition: all .5s ease-in-out;
    	    transition: all .5s ease-in-out;
}

Dal codice puoi vedere che l’effetto transition viene attivato solo nel caso in cui all’elemento <nav> del menu venga aggiunta la classe ‘animate-li‘; questo è per animare gli elementi della lista solo nel caso in cui il menu venga aperto, e non durante l’azione di chiusura.

Per rendere l’effetto più accattivante aggiungiamo a tutti gli elementi della lista (tranne il primo) un leggero ritardo rispetto a quello precedente tramite la proprietà transition-delay:

/* impostiamo i ritardi di animazione per gli elementi della lista */

nav.menu ul li:nth-child(2){
	-webkit-transition-delay: .05s;
		transition-delay: .05s;
}

nav.menu ul li:nth-child(3){
	-webkit-transition-delay: .08s;
		transition-delay: .08s;
}

nav.menu ul li:nth-child(4){
	-webkit-transition-delay: .11s;
		transition-delay: .11s;
}

Impostiamo quindi la classe da giungere al menu per attivare l’animazione sulle 4 voci:

/* attiviamo l'animazione della transition agendo sulle proprietà 'scatenanti' */

nav.menu.open-left ul li{

    opacity: 1;

    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

Infine, per inclinare graficamente ogni voce di menu, ci serviamo anche qui della proprietà tansform, tramite la funzionalità skew attivata agendo sull’asse delle Y:

nav.menu ul a > span{
	display: block;
	width:100%;
	height: 60px;
	background: #000;
	font-size: 20px;
	z-index: 1;
	text-transform: uppercase;
	font-weight: 400;

	padding:15px 10px 15px 75px;

	-moz-box-sizing: border-box;
		 box-sizing: border-box;

    /* 
    utilizziamo la proprietà 'skew' per effettuare un'inclinazione 
    verticale per lo span (agendo sull'asse delle Y), usando come origine 
    l'angolo in basso a sinistra per fare in modo che l'icona rimanga nella
    sua posizione rispetto allo span
    */

    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;

    -webkit-transform: skew(0,-10deg);
       -moz-transform: skew(0,-10deg);
        -ms-transform: skew(0,-10deg);
         -o-transform: skew(0,-10deg);
            transform: skew(0,-10deg);

}

Poiché l’obiettivo era quello di inclinare tutta la voce ma non l’icona, ci siamo serviti di uno <span> posto all’interno del link a cui abbiamo attribuito uno sfondo nero e all’interno del quale abbiamo inserito il testo della rispettiva voce.

Questa tecnica ci ha permesso inoltre di applicare due trasformazioni diverse ad ogni voce di menu, in quanto non sarebbe stato possibile traslare ed inclinare contemporaneamente l’elemento <li> (la possibilità di impostare una sola trasformazione alla volta per ogni elemento è purtroppo una limitazione delle animazioni CSS3).

---

Come realizzare un #mobileapp slide menu animato con #CSS3 e #modernizr #webdesign
Click To Tweet

---

Il codice Javascript

Andiamo a gestire ora l’evento di click sul pulsante di apertura per aprire o chiudere il nostro Mobile Slide Menu:

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

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

$(function(){

	var menuNav = $("nav.menu");	
	$(".toggle-menu").on("click", function(){	

    	if(!menuNav.hasClass("open-left")){

    		/*
	    		se il menu di navigazione non ha la classe 'open-left' e quindi è chiuso, 
	    		come prima cosa aggiungiamo la classe 'animate-li', che aggiunge le impostazioni per l'effetto di transizione,  
	    		e poi la stessa 'open-left'; facciamo quindi lo stesso con il contenitore della pagina (classe 'content-wrapper')
    		*/

    		menuNav.addClass("animate-li");
	    	$("nav.menu, .content-wrapper").addClass("open-left");
    	}else{

    		/*
    			se il menu di navigazione è 'aperto', quindi presenta la classe 'open-left',
	    		come prima cosa rimuoviamo la classe 'animate-li' in modo da non scatenare l'animazione
	    		sulle <li> per la chiusura
	    		Poi rimuoviamo la classe 'open-left' SOLO al contentenitore, in modo da scatenare l'aniamzione di chiusura.
	    		AL termine di quest'ultima rimuoveremo la classe anche dal menu per ripristinare la posizione di partenza di ogni <li>
    		*/

	    	menuNav.removeClass("animate-li");
	    	$(".content-wrapper").removeClass("open-left").one(transitionEventName, function(){
		    	menuNav.removeClass("open-left");
	    	});
    	}		    	
	});

});

Nel momento in cui il pulsante viene cliccato controlliamo se il menu è aperto o chiuso verificando la presenza o meno della classe ‘open-left‘ sull’elemento <nav>.

Se è chiuso, prima attiviamo gli effetti per le voci di menu aggiungendo la classe ‘animate-li‘ al contenitore del menu, poi avviamo le animazioni sia su di esso che sul contenitore delle pagine, aggiungendo ai relativi elementi la classe ‘open-left‘.

Se invece il menu è visible, rimuoviamo la classe ‘animate-li‘ dall’elemento <nav> per non scatenare l’animazione contraria sulle 4 voci, poi rimuoviamo la classe ‘open-left‘ dal contenitore in modo avviare l’effetto slide di chiusura, ed infine, una volta terminato quest’ultimo, riportiamo le voci di menu allo stato iniziale rimuovendo anche dall’elemento <nav> la classe ‘open-left’.

Per vedere come gestire gli eventi di fine transizione e animazione con Modernizr, ti consiglio di leggere questo articolo:

• Modernizr e CSS3: gestire gli eventi di fine animazione e transizione con javascript

 

---

Come realizzare un #mobileapp slide menu animato con #CSS3 e #modernizr #webdesign
Click To Tweet

---

Conclusioni

Dalla demo puoi vedere come il risultato dell’esperimento sia un’animazione fluida e performante, priva di quei sfarfalli e crash che spesso caratterizzano le applicazioni HTML realizzate con framework come jQuery Mobile o jQtouch.

Due piccole note su questo tutorial:

1. nel codice sopra riportato sono stati aggiunti i prefissi su proprietà come transition e transform per la compatibilità browser; tuttavia sviluppando solo per mobile sarebbe possibile omettere tutti i prefissi tranne quello per browser webkit-based (-webkit-)
2. per avere un risultato ed una user-experience migliore sarebbe opportuno aggiungere il supporto per il touch, in modo da mostrare il menu durante l’azione di swipe dell’utente.

E tu? Hai mai realizzato delle applicazioni Mobile in HTML4, CSS3 e Javascript? Lascia un commento qui di seguito e fammi sapere le tue opinioni a riguardo!

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

Oltre che realizzare interfacce semplici ed intuitive, per creare un’ottima user-experience bisogna rendere la nostra applicazione anche comoda per l’utente. Innumerevoli sono le tecniche per raggiungere questo obiettivo, e nell’ambito di HTML Mobile App, una fra queste è sicuramente quella di ottimizzare lo spazio in cui vengono mostrati gli elementi di una lista.

E’ quello che fa per esempio l’applicazione di Gmail per iPhone, dove se viene selezionato il campo di testo per la ricerca nella casella mail, questo si sposta verticalmente posizionandosi al posto della navbar, che allo stesso tempo modifica anch’essa la sua posizione verticalmente per uscire dallo schermo.

In questo modo è possibile ottimizzare lo spazio per la visualizzazione dei risultati, espandendolo di circa 45 pixel (l’altezza della navbar), che in un dispositivo mobile possono fare la differenza.

Riproduciamo l’effetto con un’animazione CSS3 performante

A tal proposito in questo articolo voglio segnalarti un tutorial che ho scritto per gli amici di LaboratorioCSS.it, atto a riprodurre lo stesso effetto in HTML5 e CSS3, il tutto utilizzando animazioni fluide e performanti (ti consiglio di leggere questo articolo a proposito delle prestazioni).

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 interessare: Animate.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“.

Il markup HTML

Come primo step impostiamo il markup HTML della pagina:

<nav>
	<button rel="prev"><i class="fa fa-chevron-left"></i> Indietro</button>
	<h1 class="title">HTML Mobile App</h1>
	<button rel="next">Avanti <i class="fa fa-chevron-right"></i></button>
</nav>
<article>	

	<ul class='page animated'>
		<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>
		...
                ...
                ...
	</ul>

</article>

 

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

.page {
   list-style: none;
   margin: 0;
   padding: 0;
   border-top: solid 1px #c8c8c8;
   border-bottom: solid 1px #c8c8c8;
   background-color: #fff;
   overflow: hidden;
   overflow-y: auto;

   /* stili per il posizionamento */
   position: absolute;
   top:100px;
   bottom:0;
   width: 100%;

}

/* 
	stili per le pagine prima delle animazioni di entrata, 'nascoste' fuori dallo schermo,
	a sinistra nel caso  della classe prev, a destra nel caso della classe next
*/

.page.prev{
	-webkit-transform: translateX(-110%);
	-moz-transform: translateX(-110%);
	-o-transform: translateX(-110%);
	transform: translateX(-110%);
}
.page.next{
	-webkit-transform: translateX(-110%);
	-moz-transform: translateX(-110%);
	-o-transform: translateX(-110%);
	transform: translateX(-110%);
}

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.

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):

<link href="css/animate-custom.css" rel="stylesheet">

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:

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

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

//variabile globale per controllare se un'animazione è in corso o meno
   var animating = false;

   //bind dell'evento click sui pulsanti di paginazione 
   $("nav button").on("click", function(){

   	   /* 
   	   	siccome non vogliamo che più animazioni vengano eseguite contemporanemante,
   	   	annulliamo l'animazione se un 'altra è in corso. Con questa tecnica 
   	   	evitiamo per esempio l'avvio di due animazioni se l'utente effettua un 
   	   	doppio click sul pulsante
   	    */
   	   if(animating)
   	   		return false;

   	   /*
   	   riprendiamo come prima cosa il tipo di 
   	   button (next o prev) attraverso l'attributo 'rel'
   	   */
	   var mode = $(this).attr("rel");

	   /*
	   cloniamo l'elemnto della lista; questa azione, in un contesto reale,
	   andrebbe sostituita con la generazione di una lista a dopo 
	   un'eventuale chiamata ajax per reperire i dati o qualunque altro
	   sistema per ottenere idati della pagina successiva o precedente 
	   */			   
	   var newPage = $("ul.page").clone();

	   /*
	   	una volta generato l'elemento della lista, aggiungiamo la classe next o prev, 
	   	a seconda button premuto; questa classe determinerà la posizione della pagina 
	   	prima dell'animazione (fuori dello schermo, a sinistra o a destra).
	   */
	   newPage.addClass(mode)

	   //aggiungiamo l'elemento DOM al documento, all'interno del tag article
	   $("article").append(newPage);

	   /*
	   a seconda del tipo di button premuto aggiungiamo la classe 
	   di entrata da destra o sinista, che avvia l'animazione
	   */
	   animating = true; //l'animazione ha inizio
	   newPage.addClass(mode=="next"?"slideInRight":"slideInLeft");
	   /*
	   	   gestiamo l'evento di fine animazione in modo da resettare la variabile 'animating'
	   	   e rimuovere l'elemento precedente dal documento, per alleggerire il markup 
	   	   (utile nei dispositivi mobile)
	   	   rimuoviamo inoltre le classi 'next' o 'prev' e 'slideInRight' o 'slideInLeft' dall'elemento
	   */			

	   newPage.one(animationName, function(){
		   animating = false;
		   $("ul.page").not(newPage).remove();
		   newPage.removeClass("next prev slideInRight slideInLeft");
	   });

   });

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.

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.

Usare animazioni e transizioni CSS3 in siti e applicazioni web è ormai diventata (fortunatamente) pratica sempre più comune ed i vari web designer si sbizzarriscono con il loro utilizzo per cercare di distinguersi in creatività e design rispetto agli altri.

Molte volte navigando in rete ci imbattiamo in portfolio o showcase che usano una combinazione di effetti CSS3 ben organizzati e disposti secondo un determinato ordine, al fine di raggiungere un certo tipo di risultato.

Anche a me capita molto spesso di dover far partire un’animazione o transizione nel momento in cui l’altra è appena terminata. In questo articolo che ti voglio parlare di una risorsa secondo me molto utile: come gestire gli eventi di callback di fine animazione e transizione nei CSS3.

 

Modernizr e CSS3

Un tool che non deve mai mancare nelle mie applicazioni, siano esse mobile o web, è sicuramente Modernizr. Grazie ad esso possiamo tranquillamente inserire nei nostri progetti tutte le nuove tecnologie e funzionalità che il web ci mette a disposizione, in modo da gestire i browser che non le supportano e applicando la tecnica del miglioramento progressivo molto facilmente.

Mi ero servito di Modernizr per applicare la tecnica del progressive enhancement in questo articolo su come realizzare un menù stile mobile con i CSS3.

Vediamo un esempio di come usare il framework per richiamare tramite javascript una funzione all’evento di fine animazione o transizione CSS3 di un elemento DOM.

Supponiamo di avere due animazioni e di voler far partire la seconda solo al termine della prima:

Credits: le animazioni sono state prelevate dal codice sorgente del framework animate.css (ne avevo parlato in questo articolo)

Per prima cosa includiamo Modernizr nel documento, all’interno del tag <head>, come dice la documentazione:

<script src="js/modernizr.custom.js"></script>

Per spiegare il concetto nel modo più semplice applicheremo il primo effetto ad una div, e dopo l’evento di fine animazione aspetteremo 5 secondi per poi passare alla seconda animazione. Utilizziamo jQuery per realizzare tutto ciò:

$(function(){

   var endAnimationEventName = getEndAnimationName();  

   //aggiungiamo la classe per l'animazione e all'evento di dine animazione
   //eseguiamo (una volta con '.one') la funzione successiva
   $("#mydiv").addClass("rotateInDownLeft").one(endAnimationEventName, function(){
       $(this).text("Aspetto 5s poi me ne vado...");
       setTimeout(function(){
           $("#mydiv").addClass("fadeOutRight");   
       }, 5000); //aspettiamo 5 secondi
   });

});

OK, ma come fa la funzione “getEndAnimationName” a riprendere il nome dell’animazione?

E’ proprio qui che entra in gioco Modernizr: ci serviamo della funzione “prefix” per conoscere il prefisso del browser dell’utente associato alla proprietà passata come input.

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

Nella funzione  abbiamo preparato un oggetto con i prefissi di tutti i browser come chiavi e i nomi degli eventi di fine animazione come valori; quindi impostiamo come parametro di ritorno il valore corrispondente alla chiave restituita da Modernizr.

Ovviamente, se abbaiamo bisogno del nome dell’evento di inizio animazione, la procedura sarà la stessa, modificando i nomi degli eventi con “webkitAnimationStart“, “oAnimationStart“, “MSAnimationStart“, e “animationStart“.

Per impostare l’evento di fine transizione, il procedimento sarà analogo:

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

 

Conculsioni

Grazie a questa tecnica sono riuscito ad organizzare e coordinare la sinergia tra le view delle applicazioni mobile HTML5 che ho distribuito su App Store. Mi è tornata particolarmente utile per esempio al fine di nascondere o eliminare la div di una view al termine di una animazione di uscita per alleggerire il markup (migliorando quindi le prestazioni).

E tu? Quale tecniche utilizzi per gestire le animazioni e le transizioni nei tuoi progetti?

Nello sviluppo di un’interfaccia, sia essa progettata per una web app o per un sito web, le animazioni CSS3 stanno diventando uno degli ingredienti fondamentali. Grazie ad esse è possibile creare una user experience più gradevole e inevitabilmente un risultato finale di maggiore qualità (es.: la web page della mia nuova applicazione per iOS7: Tint).

Tuttavia usare stili CSS per creare delle animazioni non è sempre facile, soprattuto se si parla di importanti fattori come performance e compatibilità tra browser.

Combinare animation e transition (accompagnati dai relativi prefissi per i vari browser come -webkit-, -moz-, -ms- , -o-) con degli attributi sbagliati (affronteremo anche questo argomento in uno dei prossimi articoli) può infatti portare a problemi di sfarfallio, scatti e, soprattuto nel caso di dispositivi mobili o di effetti che prevedono lo spostamento ed il rendering di numerosi elementi DOM, ad un crash della nostra applicazione/sito web.

Dall’altro lato, l’operazione di scrittura di fogli per animazioni ed effetti in modo corretto può portare via diverse ore del nostro prezioso tempo.

In questo post voglio parlarti di animate.css, un’interessante raccolta di animazioni CSS3 cross-browser (ovviamente per browser ci si riferisce a quelli moderni), molto utile se si vuole realizzare effetti di svariato genere.

La libreria, un progetto di Daniel Eden, è stata creata al fine di far risparmiare del tempo a coloro che (come me) usano costantemente gli stessi tipi di animazioni, evitando l’inutile spreco di quel tempo che altrimenti sarebbe impiegato per organizzare i keyframes degli effetti di cui abbiamo bisogno.

Servendoci di animate.css avremo a disposizione tutti i tipi di animazioni più comuni come shake, bounce, swing, rotate e molti altri combinati tra loro, molto utili per implementare nei nostri lavori oggetti come modal, alerts, transizioni tra pagine ecc..

Dal sito web è possibile sia scaricare l’intero pacchetto che crearne uno personalizzato in base alle nostre esigenze, solo con gli effetti che vogliamo includere nel documento.

Ogni animazione è stata scritta in modo tale da poter essere eseguita su tutti i browser moderni come safari, mozilla, opera ed IE 10+ (per maggiori dettagli consulta questa tabella sulla compatibilità delle animazioni CSS3).

 

Ora potrai concentrati più su quali effetti scegliere per la tua interfaccia che sulla loro stessa creazione, buon divertimento!