Aggiungere un'animazione di neve o pioggia ad una pagina web è un modo semplice ed efficace per rendere un sito più coinvolgente e visivamente interessante. Specialmente in occasione di festività stagionali o per comunicare un'atmosfera particolare. Che si tratti di un effetto natalizio o di una giornata piovosa, queste animazioni possono contribuire a creare un'esperienza più immersiva per l'utente.
Effetto meteo animato sul sito web: animazione di neve e pioggia con HTML, CSS e JS
In questo tutorial, ti guideremo passo dopo passo nella realizzazione di un effetto meteorologico animato utilizzando HTML, CSS e JavaScript. Senza l'uso di librerie esterne. Il risultato sarà leggero, compatibile con tutti i browser moderni e facilmente personalizzabile. Anche se non hai molta esperienza con JavaScript o animazioni web, seguendo questa guida sarai in grado di ottenere un effetto sorprendente in pochi minuti.
Realizzazione con HTML, CSS e JS
Per realizzare questa animazione utilizzeremo tre linguaggi fondamentali del web: HTML per la struttura della pagina, CSS per lo stile e le animazioni e JavaScript per generare dinamicamente gli elementi e controllarne il comportamento.
L'effetto che otterremo sarà leggero, responsive e visibile su qualsiasi browser moderno. Senza l'uso di librerie o framework esterni. Per semplicità, in questa guida ci concentreremo sull'effetto pioggia, che è leggermente più semplice da implementare rispetto alla neve, soprattutto per quanto riguarda il movimento e la gestione delle particelle. Tuttavia, una volta compreso il meccanismo, sarà facile adattare il codice anche per creare una suggestiva nevicata. Basterà modificare alcuni parametri visivi.
Alla fine della guida avrai una pioggia animata che scende sullo sfondo della tua pagina. Pronta per essere personalizzata secondo le tue esigenze.
Il codice HTML della pagina web
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animazione di Pioggia</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Contenitore per l'effetto pioggia -->
<div class="pioggia"></div>
<script src="script.js"></script>
</body>Questo file HTML rappresenta la struttura base della pagina. Include poi il collegamento al foglio di stile CSS (stile.css
script.js
<body>
div
pioggia
Non sono presenti altri elementi perché tutta l'animazione verrà sovrapposta allo sfondo della pagina. In questo modo il layout si manterrà pulito e minimale.
Il codice CSS
body {
margin: 0;
padding: 0;
background: linear-gradient(to bottom, #1e1e1e, #2c3e50);
overflow: hidden;
height: 100vh;
}
.pioggia {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.goccia {
position: absolute;
width: 2px;
height: 15px;
background: rgba(255, 255, 255, 0.5);
animation: caduta 1s linear infinite;
}
@keyframes caduta {
0% {
transform: translateY(-100%);
opacity: 1;
}
100% {
transform: translateY(100vh);
opacity: 0;
}
}Il foglio di stile imposta uno sfondo scuro sfumato alla pagina per dare profondità all'animazione, rimuove margini e padding e impedisce lo scroll della pagina. Il contenitore .pioggia occupa tutta la finestra del browser ed è posizionato in modo assoluto per permettere alle gocce di cadere sopra qualsiasi altro contenuto. Ogni goccia, creata dinamicamente in JavaScript con la classe .goccia, è rappresentata da un sottile rettangolo semitrasparente animato con @keyframes caduta. Esso parte da sopra lo schermo e scende verso il basso sfumando, con un effetto continuo e fluido. Il risultato è un'animazione realistica e leggera di pioggia che scende su tutta la pagina.
Il codice JavaScript
// Selezioniamo il contenitore della pioggia
const contenitore = document.querySelector(".pioggia");
// Numero di gocce da generare
const numeroGocce = 100;
for (let i = 0; i < numeroGocce; i++) {
const goccia = document.createElement("div");
goccia.classList.add("goccia");
// Posizione orizzontale casuale
goccia.style.left = Math.random() * 100 + "vw";
// Ritardo e durata variabili per un effetto più naturale
const ritardo = Math.random() * 2;
const durata = 0.5 + Math.random() * 1;
goccia.style.animationDelay = ritardo + "s";
goccia.style.animationDuration = durata + "s";
contenitore.appendChild(goccia);
}Questo script seleziona il contenitore .pioggia
div
.goccia
Ogni goccia viene posizionata orizzontalmente in modo casuale all'interno dello schermo (left in vw) e le viene assegnato un ritardo (animationDelay) e una durata (animationDuration) leggermente diversi per rendere l'animazione più realistica e meno uniforme. Infine, ogni goccia viene aggiunta al contenitore, dando così vita a un'animazione continua di pioggia che cade sull'intera pagina. Il numero di gocce è facilmente regolabile tramite la variabile numeroGocce
Risultato finale: creare un'animazione di neve o pioggia è semplice
Come si può osservare nella GIF riportata qui sopra, l'effetto pioggia ricrea un'atmosfera realistica e dinamica. Ideale per aggiungere un tocco visivo suggestivo a landing page, progetti creativi o sezioni stagionali di un sito.
Le gocce cadono a velocità e in punti casuali, evitando la ripetitività e rendendo l'animazione piacevole anche a lungo. Inoltre, il tutto è stato ottenuto senza l'uso di librerie esterne o immagini, ma solo con HTML, CSS e JavaScript puri. Ciò assicura leggerezza, compatibilità cross-browser e facilità di personalizzazione.
Puoi facilmente adattare questo stesso codice per creare una nevicata, cambiando ad esempio la forma delle particelle, rallentando l'animazione e usando colori più chiari e opachi. Il sistema è flessibile e modulare: con poche modifiche potrai ottenere un'ampia varietà di effetti meteorologici o decorativi. Inoltre, questo tipo di animazione è utile non solo per scopi estetici ma anche per rendere più accattivanti landing page, sezioni di siti web stagionali (come promozioni natalizie o autunnali) o semplicemente per aggiungere un tocco interattivo e originale al tuo progetto.
