Introduzione
Creare un effetto di particelle che seguono il cursore del mouse è un ottimo modo per aggiungere un tocco di interattività e di design “wow” al tuo sito o al tuo progetto web. Questo tipo di animazione, oltre a essere visivamente accattivante, può fungere da sfondo dinamico o da elemento decorativo, catturando l’attenzione degli utenti e rendendo la navigazione più piacevole.
In questa guida vedremo come strutturare un progetto di base con HTML, CSS e JavaScript per generare particelle che si muovono ed evaporano progressivamente, dando un effetto “scia” al movimento del mouse.
Struttura di base del progetto
- HTML: definisce un elemento
<canvas>con un ID univoco per poterlo gestire tramite JavaScript. - CSS (opzionale): imposta la dimensione del canvas, ad esempio a schermo intero, oppure personalizzala in base alle tue esigenze.
- JavaScript: gestisce la creazione delle particelle, il loro disegno e l’aggiornamento costante della posizione tramite
requestAnimationFrame.
Esempio di Boilerplate HTML
Di seguito, un esempio di documento HTML che include un canvas a schermo intero:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Effetto Particelle che Seguono il Mouse</title>
<style>
/* Imposta il canvas a schermo intero */
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
#myCanvas {
display: block;
background: #000; /* sfondo nero per enfatizzare i pallini bianchi */
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script src="script.js"></script>
</body>
</html>Implementazione in JavaScript: Passo dopo Passo
L’intero effetto si basa su alcune operazioni chiave:
- Inizializzare il
<canvas>: impostazione delle dimensioni e del contesto 2D. - Creare un array di particelle: ogni particella avrà posizione, velocità, raggio e opacità propri.
- Gestire l’evento
mousemove: ogni volta che si muove il mouse, si generano nuove particelle. - Animare il tutto con
requestAnimationFrame: disegnare, aggiornare e rimuovere le particelle esaurite.
1. Inizializza il Canvas
Nel file script.js, iniziamo selezionando l’elemento <canvas> e impostandolo alle dimensioni della finestra:
// Seleziona l'elemento canvas
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Imposta le dimensioni iniziali a tutto schermo
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Aggiorna dimensioni se ridimensioni la finestra
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});In questo modo, il canvas si ridimensionerà automaticamente ogni volta che l’utente cambierà la grandezza della finestra del browser.
2. Crea la Classe/oggetto Particle
Le particelle saranno oggetti dotati di proprietà come posizione (x,y), velocità (speedX, speedY), raggio ed opacità. Per gestirle, definiamo una classe Particle e un array globale in cui memorizzarle:
// Array che conterrà tutte le particelle
const particlesArray = [];
// Classe per le particelle
class Particle {
constructor(x, y) {
// Posizione iniziale (corrisponde al mouse)
this.x = x;
this.y = y;
// Velocità casuale
this.speedX = (Math.random() - 0.5) * 2;
this.speedY = (Math.random() - 0.5) * 2;
// Raggio del cerchio (2–7)
this.radius = Math.random() * 5 + 2;
// Opacità iniziale per effetto dissolvenza
this.alpha = 1;
}
// Disegna la particella sul canvas
draw() {
ctx.save();
ctx.globalAlpha = this.alpha;
ctx.fillStyle = '#fff'; // colore bianco
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
// Aggiorna posizione e opacità
update() {
this.x += this.speedX;
this.y += this.speedY;
// Riduce gradualmente l'opacità (effetto dissolvenza)
this.alpha -= 0.02;
}
}3. Ascolta l’evento mousemove
Quando il cursore si muove, creiamo una o più particelle in corrispondenza delle coordinate del mouse:
window.addEventListener('mousemove', (e) => {
// Crea 3 particelle ogni volta che il mouse si muove
for (let i = 0; i < 3; i++) {
particlesArray.push(new Particle(e.x, e.y));
}
});Giocando con il numero di particelle nel ciclo (for (let i = 0; i < 3; i++)), puoi aumentare o ridurre la densità dell’effetto.
4. Loop di animazione con requestAnimationFrame
Infine, usiamo requestAnimationFrame per aggiornare il canvas a ogni “frame” di animazione:
function animate() {
// Pulisci il canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Aggiorna ogni particella
for (let i = 0; i < particlesArray.length; i++) {
particlesArray[i].draw();
particlesArray[i].update();
// Rimuovi la particella se l’opacità è scesa sotto 0
if (particlesArray[i].alpha <= 0) {
particlesArray.splice(i, 1);
i--; // Evita di saltare elementi dell’array
}
}
requestAnimationFrame(animate);
}
// Avvia l’animazione
animate();Questo loop in pratica:
- Pulisce il canvas.
- Disegna ogni particella esistente.
- Aggiorna posizione e opacità.
- Rimuove le particelle che hanno perso del tutto la loro opacità.
- Chiama di nuovo
animate()per proseguire all’infinito.
Possibili Ottimizzazioni
- Debounce/Throttle: se usi parecchie particelle, potresti sovraccaricare CPU/GPU. In tal caso, limita la frequenza con cui aggiungi nuove particelle nell’evento
mousemove. - Gestione di velocità e raggio: modifica i valori di
speedX,speedYethis.radiusper ottenere un effetto più “tranquillo” o più “esplosivo”. - Colori e sfondo: sperimenta con sfondi diversi (gradienti, immagini) e colora le particelle, magari con tinte casuali (
fillStyleconrgb()ohsl()dinamici). - Effetti speciali: puoi far “esplodere” le particelle al clic, oppure farle convergere gradualmente verso la posizione del mouse invece che allontanarsi.
Conclusione
L’animazione delle particelle che seguono il mouse è un esempio perfetto di come JavaScript e <canvas> possano interagire per creare effetti visivi di grande impatto. Giocando con parametri come la velocità di movimento, il raggio delle particelle o la frequenza di creazione, puoi ottenere stili molto diversi: da un effetto minimalista e delicato a un’esplosione di luce e colore.
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.
