Un pannello a comparsa laterale animato da CSS3 e jQuery, per mostrare rapidamente informazioni come il profilo utente o notifiche di qualsiasi genere.
Ci possono essere casi in cui vogliate mostrare informazioni relative al contenuto principale della pagina, come ho fatto io su questo sito. Si potrebbe pensare di inserire semplicemente un link ad un’altra pagina con tutte le informazioni che desideriamo mostrare, ma sconsiglio questa pratica per due motivi:
- La fruibilità della pagina verrebbe compromessa; l’utente verrebbe disorientato, venendosi a trovare su un’altra pagina.
- Il contenuto dell’area laterale è strettamente pertinente al contenuto principale della pagina.
In questi casi un pannello a comparsa laterale è la miglior soluzione in termini di usabilità; è visivamente accattivante e rapido da consultare. Inoltre è qualcosa di familiare per chi usa uno smartphone.
Diamo uno sguardo al codice da usare.
Creiamo la struttura in HTML5
La struttura del codice HTML può essere più o meno complessa, dipende dal contenuto che vogliamo mostrare nel pannello a comparsa laterale. In questo esempio partiamo da qualcosa di piuttosto semplice.
<main class="cd-main-content"> <!-- contenuto principale della pagina --> </main> <div class="cd-panel from-right"> <header class="cd-panel-header"> <h1>Titolo</h1> <a href="#0" class="cd-panel-close">Chiudi</a> </header> <div class="cd-panel-container"> <div class="cd-panel-content"> <!-- contenuto laterale --> </div> <!-- cd-panel-content --> </div> <!-- cd-panel-container --> </div>
Aggiungiamo lo stile CSS
Un paio di suggerimenti sul codice CSS. Prima di tutto, perché abbiamo separato il <header> dal contenitore pannello (.CD-panel-container)? Ho applicato una trasformazione CSS3 – la proprietà translateX – al pannello per farlo comparire dall’esterno della finestra del browser. Usare una trasformazione invece di animare la posizione sinistra/destra è più efficiente in termini di prestazioni. Comunque, il <header> ha una posizione di tipo fixed. Gli elementi con attributo fixed “saltano” quando gli si applica una trasformazione CSS3, perdono la loro posizione quando il valore di trasformazione viene modificato. Ecco perché il <header> è animato separatamente dal contenuto del pannello; per il <header> animeremo il valore di posizionamento superiore.
.cd-panel {
/*...*/
visibility: hidden;
transition: visibility 0s 0.6s;
}
.cd-panel.is-visible {
visibility: visible;
transition: visibility 0s 0s;
}
.cd-panel-header {
/*...*/
position: fixed;
top: -50px;
width: 90%;
height: 50px;
transition: top 0.3s 0s;
}
.is-visible .cd-panel-header {
top: 0;
transition: top 0.3s 0.3s;
}
.cd-panel-container {
/*...*/
position: fixed;
width: 90%;
height: 100%;
top: 0;
right: 0;
transition-property: transform;
transition-duration: 0.3s;
transition-delay: 0.3s;
transform: translate3d(100%, 0, 0);
}
.is-visible .cd-panel-container {
transform: translate3d(0, 0, 0);
transition-delay: 0s;
}
Un altro punto che alcuni di voi potrebbero trovare interessante è il ritardo della proprietà di transizione. Quando animate gli elementi su una pagina web, se si imposta un ritardo, o si utilizzano differenti durate di transizione/animazione, otterrete sicuramente un impatto visivo maggiore.
Gestione degli eventi con jQuery
Per gestire l’evento click che lancia l’animazione, basta aggiungere o rimuovere la classe .is-visible al <div> con la classe .cd-panel
