Pushbar.js: creare pannelli scorrevoli

Un effetto / controllo di animazione molto utilizzato nel Web Design di oggi, anche grazie all'avvento dei layout Bootstrap-style, è quello dei pannelli scorrevoli "ad entrata".

Pushbar.js è un nuovo plug-in completamente standalone (non necessita dunque di altre librerie o framework di qualunque tipo per funzionare) utile ad assolvere, in modo alquanto semplice, questo compito specifico.

Come per tutti i plug-in Javascript standalone dal footprint ridotto, che mirano al minimalismo del codice e alla semplicità di utilizzo, la procedura di installazione di Pushbar.js risulta semplice. Una volta scaricato il plugin-in dall'apposito repository su GitHub, occorre:

•  aggiungere il foglio di stile CSS pushbar.css nell'head;
•  aggiungere il file Javascript pushbar.js nell'head o prima della chiusura del body
•  aggiungere lo script di inizializzazione:

new Pushbar({
 blur:true,
 overlay:true
});

Le opzioni di configurazione possibili sono:

• overlay: produce uno sfondo "opaco" e scuro (il classico effetto overlay) che copre tutto il contenuto della pagina all'entrata del pannello scorrevole. L'effetto si riproduce al contrario all'uscita del pannello. Di default è impostato su true.
• blur: se settato su true, produce un interessante effetto di sfocamento all'entrata ed all'uscita del pannello scorrevole. Di default è impostato a false.

Vediamo un esempio funzionante. Prima di tutto configuriamo il codice HTML necessario al layout del plug-in:

<div data-pushbar-id="mypushbar1" class="pushbar from_left">
	Push bar content 1
	<button data-pushbar-close>Close</button>
</div>
<div data-pushbar-id="mypushbar2" class="pushbar from_bottom">
	Push bar content 2
	<button data-pushbar-close>Close</button>
</div>
<div class="pushbar_main_content">
	Main content of the page
	<button data-pushbar-target="mypushbar1">
	Open my pushbar 1
	</button>
	<button data-pushbar-target="mypushbar2">
	Open my pushbar 2
	</button>
</div>

Come possiamo vedere, la tipologia di "entrata" è definita dalle classi HTML "pushbar" e "from_" + la direzione desiderata. L'attributo non standard "data-pushbar-id" è necessario per impostare l'elemento (o gli elementi) target. Nel markup dei pulsanti che fungono da azionatori dell'animazione (trigger), occorre invece impostare l'attributo HTML "data-pushbar-target" avente valore coincidente con l'elemento contenitore impostato in precedenza. I due elementi sono dunque obbligatoriamente collegati.

A questo punto, occorre settare la configurazione Javascript del pannello, e la nostra demo è pronta per l'uso:

var pushbar =   new Pushbar({
		blur:true,
		overlay:true,
	  });
//apre il pannello
pushbar.open('mypushbar1');
// chiude il pannello
pushbar.close();

Il metodo "open" andrà ad aprire il pannello scorrevole rappresentato dall'id indicativo dell'elemento in questione, mentre il metodo "close" chiuderà il pannello attivo.

Nella pagina ufficiale del plug-in è possibile vedere questo codice in azione in ognuna delle 4 direzioni possibili:

• left
• right
• top
• bottom

Con l'oggetto Pushbar, esistono 2 eventi custom che scattano nell'animazione, utili per impostare ulteriori controlli personalizzati, come ad esempio animazioni o eventi Ajax che contattano il server in backgorund:

• pushbar_opening, che si aziona tramite l'elemento che identifica il pannello all'entrata dello stesso.
• pushbar_closing, che si aziona tramite l'elemento che identifica il pannello all'uscita dello stesso.

In conclusione, Pushbar.js rappresenta una scelta molto interessante per la produzione di pannelli scorrevoli dall'aspetto, dalla configurazione e dall'impatto minimale. Quando non abbiamo necessità di costruire animazioni più complesse, che sono possibili grazie agli innumerevoli plug-in che si avvalgono di framework completi come ad esempio jQuery, Pushbar.js è una delle soluzioni più immediate disponibili open-source.

Via Pushbar.js