Creare un SnackBar di Notifica con JavaScript in Poche Righe di Codice

Le notifiche di SnackBar sono estremamente popolari su molti siti web e applicazioni. Sono utilizzate per informare gli utenti di azioni come “salvataggio completato”, “modifica effettuata” o altre notifiche simili. Oggi creeremo insieme un SnackBar di Notifica con JavaScript, HTML e CSS in pochissime righe di codice. L’obiettivo è avere qualcosa di semplice, elegante e facilmente riutilizzabile.

Cos’è uno SnackBar di Notifica?

Lo SnackBar è una piccola notifica che appare e scompare automaticamente dopo pochi secondi. È spesso utilizzato per dare un feedback visivo all’utente senza disturbare il flusso della pagina, ed è quindi perfetto per azioni rapide come copiare un link o confermare una modifica.

Vediamo come costruire questo SnackBar:

HTML: Struttura di Base

Iniziamo aggiungendo un piccolo blocco HTML per il nostro SnackBar. In questo caso, abbiamo bisogno solo di un div:

<div id="snackbar">Notifica di esempio!</div>
<button onclick="showSnackbar()">Mostra SnackBar</button>

Spiegazione:

• <div id="snackbar">: Questo div rappresenta il nostro SnackBar e conterrà il messaggio di notifica.
• <button>: Un semplice pulsante che attiva la visualizzazione dello SnackBar.

CSS: Stile dello SnackBar

Proseguiamo con lo stile CSS, per far apparire e scomparire il nostro SnackBar in modo elegante:

#snackbar {
  visibility: hidden; /* Nascondi lo SnackBar per default */
  min-width: 250px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  font-size: 17px;
}

#snackbar.show {
  visibility: visible; /* Mostra lo SnackBar */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

Spiegazione:

• Stile Base: Il nostro SnackBar ha un colore di sfondo scuro (#333), con il testo bianco. È posizionato al centro in basso della finestra (left: 50%; bottom: 30px;).
• Visibilità: Per default, la visibilità è nascosta (visibility: hidden). Quando il pulsante viene cliccato, si aggiunge una classe .show che attiva la visibilità.
• Animazione: Il CSS utilizza delle keyframes (fadein e fadeout) per far apparire il nostro SnackBar con un effetto di transizione fluida.

JavaScript: Mostrare lo SnackBar

Infine, aggiungiamo una piccola funzione JavaScript per mostrare e nascondere il nostro SnackBar:

function showSnackbar() {
  // Ottieni il div SnackBar
  var snackbar = document.getElementById("snackbar");

  // Aggiungi la classe "show" per mostrarlo
  snackbar.className = "show";

  // Dopo 3 secondi, rimuovi la classe per nasconderlo
  setTimeout(function(){ 
    snackbar.className = snackbar.className.replace("show", ""); 
  }, 3000);
}

Spiegazione:

• La funzione showSnackbar() viene attivata al clic del pulsante.
• La classe show viene aggiunta allo SnackBar per rendere la notifica visibile.
• Utilizzando setTimeout, rimuoviamo la classe .show dopo 3 secondi, facendo sparire la notifica.

Conclusione

Abbiamo creato un piccolo ma elegante SnackBar di notifica in poche righe di HTML, CSS e JavaScript. Questo SnackBar è utile per fornire un feedback immediato all’utente, senza intralciare il flusso della pagina.

Questo codice è perfetto per essere aggiunto a qualsiasi progetto per migliorare l’esperienza utente, sia che si tratti di una pagina di contatto, un sito di e-commerce, o una semplice web app.

Hai trovato utile questo Articolo? Continua a seguire Cyberalchimista sui social (@cyberalchimista) per altri tutorial e consigli sullo sviluppo web! Se hai domande o vuoi condividere i tuoi progetti contattaci.