Creare un messaggio di benvenuto che appare al caricamento di una pagina web è una delle tecniche più semplici ed efficaci per catturare l'attenzione degli utenti fin dal primo istante. Che si tratti di un sito personale, un blog o un e-commerce, accogliere i visitatori con un messaggio personalizzato permette di comunicare subito il tono del progetto e di guidare l'esperienza di navigazione.
Personalizzare l'esperienza utente con un messaggio di benvenuto
In questo tutorial vedremo, passo dopo passo, come realizzare un messaggio di benvenuto utilizzando soltanto HTML, CSS e JavaScript: tre linguaggi fondamentali nello sviluppo web. Non sarà necessario ricorrere a framework complessi o plugin esterni, basteranno poche righe di codice per ottenere un effetto professionale e facilmente personalizzabile. Alla fine della guida avrai tra le mani un piccolo componente pronto da integrare nel tuo sito, con la possibilità di modificarne lo stile e l'animazione secondo le tue esigenze.
Linguaggi utilizzati e anteprima del risultato
Per creare un messaggio di benvenuto che compare automaticamente al caricamento della pagina, utilizzeremo HTML, CSS e JavaScript. Ognuno di questi linguaggi ha un ruolo specifico e complementare.
HTML definisce la struttura della pagina. In questo caso ci servirà per creare il contenitore del messaggio di benvenuto e gli elementi interni, come il testo e l'eventuale pulsante di chiusura. CSS gestisce invece lo stile e l'aspetto grafico. Con esso daremo forma e colore al messaggio, ne definiremo la posizione nella pagina e aggiungeremo eventuali animazioni o transizioni per renderlo più gradevole. JavaScript, infine, aggiunge interattività. Potremo far comparire il messaggio al caricamento della pagina e consentire all'utente di chiuderlo, rendendo l'esperienza più dinamica.
Il risultato che vogliamo ottenere è un pop-up di benvenuto che appare al centro della schermata non appena la pagina viene caricata. Il messaggio avrà un testo semplice, ad esempio "Benvenuto sul nostro sito!", e potrà essere chiuso cliccando su un pulsante. Grazie a HTML, CSS e JavaScript il tutto sarà fluido, responsive e facilmente personalizzabile.
Il codice HTML
Il primo passo è definire la struttura della nostra pagina web. In HTML andremo a creare il contenitore del messaggio di benvenuto e il pulsante che permetterà all'utente di chiuderlo.
<body>
<div id="welcome-message" class="welcome-overlay">
<div class="welcome-box">
<h2>Benvenuto sul nostro sito!</h2>
<p>Siamo felici di averti qui. Esplora i nostri contenuti e scopri tutte le novità.</p>
<button id="close-btn">Chiudi</button>
</div>
</div>
<script src="script.js"></script>
</body>In questo frammento abbiamo predisposto la struttura essenziale del nostro messaggio di benvenuto: il contenitore principale con id="welcome-message", che fungerà da overlay e ospiterà il messaggio. Al suo interno, un secondo box con classe welcome-box racchiude il titolo <h2>, il testo descrittivo <p> e un pulsante con id="close-btn" che permetterà all'utente di chiudere il pop-up.
Grazie a questa semplice struttura HTML, abbiamo già una base chiara e ordinata: il messaggio è pronto ma al momento non ha ancora stile né interattività.
Il codice CSS
Dopo aver costruito la struttura in HTML, è il momento di darle forma e renderla visivamente piacevole. Con CSS possiamo trasformare il semplice contenitore in un vero e proprio pop-up elegante, centrato nella pagina e con un overlay che oscura leggermente lo sfondo.
.welcome-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
visibility: hidden;
opacity: 0;
transition: opacity 0.4s ease;
}
.welcome-overlay.active {
visibility: visible;
opacity: 1;
}
.welcome-box {
background: #fff;
padding: 30px 40px;
border-radius: 10px;
text-align: center;
max-width: 400px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
animation: scaleIn 0.4s ease;
}
#welcome-message button {
margin-top: 15px;
padding: 10px 20px;
border: none;
background-color: #0077ff;
color: white;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s ease;
}
#welcome-message button:hover {
background-color: #0056b3;
}In questo foglio di stile abbiamo prima definito l'overlay (.welcome-overlay), cioè lo sfondo semi-trasparente che copre l'intera pagina quando il messaggio appare. Questo elemento, grazie a position: fixed, rimane sempre al centro dello schermo anche se l'utente scrolla. Per centrare il contenuto abbiamo usato Flexbox (display: flex; justify-content: center; align-items: center;).
Il box centrale del messaggio, identificato da .welcome-box, è stato stilizzato con uno sfondo bianco, un po' di padding per la spaziatura interna, angoli arrotondati e un'ombra che lo stacca visivamente dal resto della pagina.
Per il pulsante abbiamo scelto uno stile semplice ma funzionale: uno sfondo blu, testo bianco e un effetto hover che cambia il colore quando l'utente ci passa sopra. In questo modo diventa chiaro e intuitivo che è cliccabile.
Infine, grazie alla classe .active, possiamo gestire con JavaScript la visibilità e la transizione del messaggio: senza questa classe, l'overlay resta nascosto; con essa, diventa visibile e sfuma gradualmente sullo schermo. Inoltre è possibile aggiungere un'animazione al momento della comparsa che lo fa crescere con un effetto morbido.
@keyframes scaleIn {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}Il codice JavaScript
È il momento di far apparire automaticamente il messaggio al caricamento della pagina e permettere all'utente di chiuderlo. Il codice è molto semplice e si concentra su due azioni principali: mostrare l'overlay e gestire il pulsante di chiusura.
window.addEventListener("load", function () {
const welcomeMessage = document.getElementById("welcome-message");
const closeBtn = document.getElementById("close-btn");
welcomeMessage.classList.add("active");
closeBtn.addEventListener("click", function () {
welcomeMessage.classList.remove("active");
});
setTimeout(() => {
welcomeMessage.classList.remove("active");
}, 5000);
});Il codice comincia con un window.addEventListener("load", ...)
All'interno della funzione selezioniamo gli elementi principali: il contenitore del messaggio (welcome-message) e il pulsante di chiusura (close-btn). Subito dopo, aggiungiamo al contenitore la classe active che, come abbiamo visto nel CSS, fa comparire l'overlay con un effetto di fade-in.
Il pulsante di chiusura è gestito con un event listener: quando l'utente clicca, la classe active viene rimossa e il messaggio scompare. Questo rende l'esperienza interattiva e consente all'utente di riprendere la navigazione senza distrazioni.
Infine, abbiamo aggiunto una funzionalità opzionale: un setTimeout che chiude automaticamente il messaggio dopo 5 secondi. Questa piccola aggiunta evita che il pop-up resti aperto troppo a lungo se l'utente non interagisce. Con queste poche righe di JavaScript il nostro messaggio di benvenuto diventa completamente funzionante e user-friendly.
Risultato finale e commento
A questo punto, unendo insieme i tre elementi HTML, CSS e JavaScript otteniamo un messaggio di benvenuto elegante e funzionale. Quando l'utente carica la pagina il pop-up appare al centro dello schermo con uno sfondo semi-trasparente che oscura leggermente il contenuto sottostante. L'animazione di entrata rende l'effetto più naturale e meno invasivo, mentre il pulsante di chiusura consente di far scomparire il messaggio in maniera immediata. Se si sceglie di attivare l'opzione del timer, il pop-up si chiude automaticamente dopo alcuni secondi permettendo all'utente di continuare la navigazione senza interruzioni.
Dal punto di vista pratico, questo componente può essere adattato in molti modi: si può personalizzare il testo del messaggio per comunicare una promozione, un avviso importante o semplicemente un saluto amichevole. Si possono modificare colori e font per integrarli al meglio con il design del sito o aggiungere effetti di transizione complessi per rendere l'esperienza più accattivante.
Abbiamo visto come, con poche righe di HTML, CSS e JavaScript, sia possibile creare un messaggio di benvenuto semplice ma efficace, capace di rendere l'esperienza dell'utente più accogliente e dinamica. Questo piccolo esercizio dimostra come l'integrazione dei tre linguaggi base del web permetta di realizzare soluzioni pratiche e personalizzabili, senza dover ricorrere a strumenti complessi.
Da qui puoi partire per sperimentare, modificare lo stile, aggiungere effetti o adattare il messaggio alle tue esigenze specifiche.
