Le animazioni sono diventate una componente essenziale nelle pagine web moderne, contribuendo a migliorare l'esperienza utente e a rendere i contenuti più dinamici. Un countdown animato è un ottimo esempio di come un'animazione ben progettata possa aggiungere interattività e utilità a un sito, indicare chiaramente il passaggio del tempo o preparare l'utente a un evento specifico. Come il lancio di un prodotto o una promozione a tempo limitato.
In questo tutorial capiremo come creare un semplice countdown animato utilizzando solo HTML, CSS e un pizzico di JavaScript. È importante sfruttare le animazioni CSS per creare un effetto visivo accattivante. JavaScript servirà invece per visualizzare dinamicamente il tempo rimanente. Questo approccio combina estetica e funzionalità, garantendo un'esperienza fluida e interattiva.
Cosa serve per creare un conto alla rovescia con HTML e CSS?
Grazie ad HTML e CSS è possibile ottenere dei risultati performanti e ottimali ma per questa guida è richiesta anche la conoscenza base di JavaScript. Il linguaggio di scripting che aggiunge interattività e dinamismo alle pagine web. L'uso di JavaScript permetterà infatti di aggiornare il testo del timer, decrementando i secondi e mostrando il tempo rimanente. Avremo così un vero e proprio conto alla rovescia che cambia nel tempo.
Anteprima e prime righe di codice
L'obiettivo finale è quello di realizzare una animazione di countdown che possa aggiornare il tempo dinamicamente con l'aggiunta di un effetto di rotazione al suo esterno per dare la sensazione dello scorrere del tempo. Al termine del countdown l'animazione lascerà il posto ad una scritta che avvisa la fine del countdown. Di seguito l’anteprima:
La pagina HTML
Innanzitutto si crea la pagina tramite HTML. Di seguito le righe di codice che permettono di configurarla con il contenuto desiderato:
<body>
<div class="countdown-container">
<div class="countdown">
<div class="circle"></div>
<div id="countdown-text" class="countdown-text">10s</div>
</div>
</div>
</body>Come si può notare il contenuto che serve per questo tipo di animazione è ridotto e può essere personalizzato a propria scelta. Il contenitore principale è importante perché presenta al suo interno il countdown. Una forma circolare a cui viene assegnata la classe CSS circle che rivedremo successivamente. Infine il testo del countdown, contenente inizialmente i secondi e successivamente la scritta di fine conteggio, viene personalizzato tramite la classe countdown-text.
Classi e attributi CSS
Una volta strutturata la pagina HTML con i suoi contenuti si può passare alla personalizzazione CSS con le varie classi e attributi:
.countdown-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.countdown {
position: relative;
width: 200px;
height: 200px;
}Le prime due classi sono quelle dei contenitori esterni. Essi verranno posizionati rispettivamente con le proprietà display: flex e display: relative. Nel primo caso il contenuto viene centrato orizzontalmente e verticalmente con un’altezza fissa di 100vh. Nel secondo la posizione viene gestiva in maniera relativa, con le proprietà di larghezza ed altezza che vengono settate a 200px in modo da creare un contorno squadrato nel quale posizionare il countdown.
Adesso si può impostare lo stile della forma circolare che realizza l'effetto di animazione del countdown. Per fare ciò viene creata la classe circle a cui si assegna un border-radius del 50%. Tale proprietà crea una curvatura pronunciata nel contenitore, rendendolo circolare, e definisce un bordo di spessore 10px e di colore azzurro che servirà per mostrare l'andamento del countdown.
L'animazione
L'animazione vera e propria viene gestita tramite i keyframes, effetti di CSS che vengono attivati secondo proprietà specifiche. In questo caso l'animazione avrà una durata di 10 secondi (relativa alla durata del countdown) e un tipo di animazione lineare e circolare. Di seguito il codice:
.circle {
width: 100%;
height: 100%;
border-radius: 50%;
border: 10px solid lightgray;
border-top: 10px solid #3498db;
animation: countdown-animation 10s linear forwards;
}
@keyframes countdown-animation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}Infine, rimane da personalizzare il testo all'interno del countdown:
.countdown-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
font-weight: bold;
}Esso viene posizionato al centro della forma circolare con uno spessore e una grandezza di 24px. È chiaro che questo testo può essere personalizzato liberamente per ottenere un effetto diverso grazie alle numerose proprietà CSS a disposizione. Una volta fatto ciò è stata completata la parte di personalizzazione e realizzazione dei contenuti del countdown animato. Ora non rimane altro che animarlo! Per fare ciò bisogna concentrarsi sul codice JavaScript che permetterà di creare un effetto di animazione fluido e funzionale.
Il codice JavaScript
Innanzitutto è importante definire la durata (in secondi) che si vuole assegnare al proprio countdown e assegnarla ad una variabile globale:
let countdownDuration = 10;Una volta fatto ciò si prosegue selezionando all'interno della pagina il testo del countdown, quello che inizialmente mostra i secondi che scorrono e successivamente la scritta di fine conteggio:
const countdownText = document.getElementById("countdown-text");A questo punto viene create la funzione principale che rende possibile l'animazione. Essa viene automatizzata grazie a setInterval, funzione che permette di eseguire un'azione in un dato tempo, in questo caso ogni secondo.
let countdown = setInterval(function () {
if (countdownDuration > 0) {
countdownText.textContent = countdownDuration + "s";
countdownDuration--;
} else {
countdownText.textContent = "Tempo scaduto!";
clearInterval(countdown);
}
}, 1000);Questa funzione ha un comportamento semplice e lineare. Grazie ad un controllo if verifica se il tempo attuale è superiore a 0, in tal caso diminuisce i secondi e aggiunge la lettera "s" (di secondi) accanto al numero. Non appena il controllo da esito negativo, ovvero i secondi a disposizione terminano, vorrà dire che il countdown avrà terminato il suo conteggio e di conseguenza verrà mostrata una scritta di conclusione come "tempo scaduto". Il countdown verrà quindi inizializzato.
Conclusione e considerazioni
L'intera realizzazione di un countdown animato tramite HTML e CSS può essere liberamente personalizzata in modo da poter rendere il risultato adatto alle proprie esigenze. Questa tecnica può essere applicata in diversi scenari, come promozioni a tempo, pagine di lancio o eventi speciali, offrendo agli utenti un'esperienza coinvolgente e ben organizzata.
