logo
Federico Barberis

Web Designer

Professionista freelance con oltre 15 anni di esperienza nel settore della grafica digitale applicata al web e alla stampa. Esperto della piattaforma WordPress e del framework Bootstrap sono in grado di seguire l’intero workflow per la realizzazione di un sito web, dalla progettazione grafica alla implementazione su server e la pubblicazione on-line. Sono appassionato del mio lavoro e alla continua ricerca di tools e soluzioni efficaci e magari innovative.

Scarica il CV
 

Pannello a comparsa laterale con CSS3 e jQuery

pannello_comparsa_laterale_CSS3+jQuery

Pannello a comparsa laterale con CSS3 e jQuery

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:

  1. La fruibilità della pagina verrebbe compromessa; l’utente verrebbe disorientato, venendosi a trovare su un’altra pagina.
  2. 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.

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.

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

Tags:
Federico Barberis
info@weblabdesign.net

Web designer free-lance con oltre 15 anni di esperienza nel settore della grafica digitale applicata al web e alla stampa. Esperto della piattaforma WordPress e del framework Bootstrap sono in grado di seguire l’intero workflow per la realizzazione di un sito web, dalla progettazione grafica alla implementazione su server e la pubblicazione on-line. Sono appassionato del mio lavoro e alla continua ricerca di tools e soluzioni efficaci e magari innovative.

Non ci sono commenti

Pubblica commento