Pushbar.js: creare pannelli scorrevoli

Link copiato negli appunti

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
aggiungere il file Javascript pushbar.js
aggiungere lo script di inizializzazione:

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

Le opzioni di configurazione possibili sono:

overlay
blur

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 close

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
pushbar_closing

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

Pushbar.js: creare pannelli scorrevoli

Ti consigliamo anche