Hai mai visitato un sito web e notato uno sfondo animato con particelle che si muovono dolcemente creando un'atmosfera moderna e coinvolgente? Quel tipo di effetto visivo, oltre a catturare l'attenzione dell'utente, può contribuire a rendere un'interfaccia più dinamica e memorabile. La buona notizia? Non serve alcun framework o libreria complessa per realizzarlo.
Creare uno sfondo dinamico con particelle animate usando HTML, CSS e JavaScript
In questa guida vedremo come costruire uno sfondo animato con particelle in movimento utilizzando semplicemente HTML, CSS e JavaScript. Nessun plugin, nessun effetto preconfezionato: solo codice puro e comprensibile. L'obiettivo è quello di creare un canvas che riempia l'intera finestra del browser e su cui si muovano piccole particelle che interagiscono fra loro, generando un effetto visivo armonioso e leggero.
Struttura e requisiti del nostro progetto
Per realizzare il nostro sfondo animato con particelle in movimento, utilizzeremo tre linguaggi fondamentali per lo sviluppo web:
L'animazione sarà leggera e reattiva, adatta anche a siti che richiedono performance ottimali. Potrai personalizzare dimensione, velocità, densità e comportamento delle particelle in base al tuo stile o alle esigenze del progetto. L'effetto che otterremo sarà simile a quello visibile in molti background moderni. Puntini luminosi che si muovono liberamente e che si collegano tra loro con linee sottili quando si trovano vicini.
Il codice HTML
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sfondo animato con particelle</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<canvas id="particles-canvas"></canvas>
<div class="title">Benvenuto nel nostro sito! </div>
<script src="script.js"></script>
</body>In questo breve estratto di codice HTML possiamo osservare innanzitutto la configurazione dei parametri fondamentali per la struttura della pagina all'interno del tag <head>
<canvas>
Il codice CSS
body {
margin: 0;
padding: 0;
overflow: hidden;
background: #0f0f1b;
}
canvas#particles-canvas {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
}
.title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 1;
font-size: 3em;
color: white;
}Nel codice CSS ci occupiamo di impostare lo stile della pagina, iniziando dal tag body
Nella seconda istruzione, invece, selezioniamo il canvas tramite ID e gestiamo il posizionamento con display: block e position: absolute. In questo modo il canvas si adatta alla larghezza e altezza dello schermo posizionandosi in alto a sinistra grazie a top: 0 e left: 0. Infine, z-index sposta il canvas dietro ad altri elementi della pagina.
Questa base CSS permette di creare un "tappeto animato" su cui poi disegneremo le particelle in movimento.
Il codice JavaScript per lo sfondo animato
const canvas = document.getElementById("particles-canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const particles = [];
for (let i = 0; i < 50; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
vx: (Math.random() - 0.5) * 1,
vy: (Math.random() - 0.5) * 1,
});
}In questa prima parte di codice Javascript otteniamo innanzitutto il contesto 2D per disegnare con canvas.getContent("2d");. Viene poi impostata la larghezza e l'altezza del canvas pari alla dimensione della finestra del browser e viene creato un array per contenere le particelle. Vengono inizializzate 50 particelle con posizioni e velocità casuali.
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach((p) => {
// Aggiorna posizione
p.x += p.vx;
p.y += p.vy;
// Rimbalzo sui bordi
if (p.x canvas.width) p.vx *= -1;
if (p.y canvas.height) p.vy *= -1;
// Disegna particella
ctx.beginPath();
ctx.arc(p.x, p.y, 2, 0, Math.PI * 2);
ctx.fillStyle = "#ffffff";
ctx.fill();
});
requestAnimationFrame(animate);
}
animate();In questa seconda ed ultima parte di codice è presente la funzione animate() che viene chiamata ricorsivamente per aggiornare il canvas. In essa viene "ripulito" il canvas ad ogni frame per ridisegnare le particelle aggiornate. Per ognuna viene gestita la posizione ed il rimbalzo in base alla velocità. Infine la particella viene disegnata come un cerchio bianco di raggio = 2px. L'ultimo comando richiama la funzione animate al prossimo frame per creare un'animazione fluida ed avvia l'animazione.
Il risultato finale: lo sfondo animato
Quello mostrato sopra è il risultato finale ottenuto tramite la combinazione del codice appena descritto: una pagina web con uno sfondo scuro animato da piccole particelle bianche che si muovono lentamente in modo casuale. Al centro dello schermo, ben visibile sopra le particelle, compare un titolo in bianco, come "Benvenuto nel nostro sito".
L'effetto finale è elegante, moderno e visivamente dinamico, perfetto per l'intestazione di una landing page, un portfolio, una pagina di attesa o il sito di un creativo. L'animazione è fluida e leggera e il codice utilizzato è talmente semplice da essere facilmente personalizzabile anche per chi ha conoscenze base di HTML, CSS e JavaScript.
Il bello di questo effetto è che con pochissime righe di codice è possibile ottenere un risultato visivo d'impatto, facilmente adattabile a qualunque tipo di progetto web. Inoltre, è completamente responsive: ridimensionando la finestra, lo sfondo si adatta automaticamente senza interrompere l'animazione.
