Come creare un effetto di testo che segue il mouse? Negli ultimi anni il web design ha fatto enormi passi avanti spostando sempre più l'attenzione verso interazioni dinamiche e micro-animazioni capaci di coinvolgere l'utente fin dal primo istante. Uno degli effetti più interessanti e utilizzati nei siti moderni, specialmente in landing page creative, portfolio e siti promozionali, è il testo che segue il movimento del mouse. Questo tipo di animazione, se realizzata con criterio, aggiunge profondità, personalità e un forte impatto visivo all'interfaccia, senza compromettere usabilità e performance.
Creare un effetto di testo interattivo che segue il cursore
In questa guida pratica vedremo come creare un effetto di testo che segue il cursore del mouse utilizzando HTML, CSS e JavaScript, in modo semplice ma efficace. Non si tratta solo di un esercizio estetico: imparare a gestire la posizione del mouse, le trasformazioni CSS e l'aggiornamento dinamico degli elementi permette di comprendere meglio come funzionano molte interazioni avanzate presenti nei siti web professionali.
L'obiettivo di questo tutorial è accompagnarti passo dopo passo nella realizzazione dell'effetto, spiegando non solo come scrivere il codice ma anche perché viene fatto in un certo modo. Anche se utilizzeremo JavaScript, il livello di difficoltà rimarrà accessibile. Sono sufficienti le basi del linguaggio e una conoscenza fondamentale di HTML e CSS.
Al termine dell'articolo avrai un effetto completamente funzionante, personalizzabile e facilmente integrabile in qualsiasi progetto web, pronto per essere adattato a testi, call to action o elementi grafici più complessi.
Quali linguaggi useremo per il nostro effetto di testo?
Per realizzare un effetto di testo che segue il mouse utilizzeremo una combinazione di HTML, CSS e JavaScript, tre tecnologie fondamentali dello sviluppo front-end che, lavorando insieme, ci permettono di ottenere un risultato fluido e interattivo.
- HTML verrà usato per creare la struttura base della pagina e l'elemento di testo che dovrà seguire il cursore.
- CSS si occuperà dello stile visivo: font, colore, dimensioni, posizionamento e, soprattutto, delle proprietà necessarie a rendere il movimento fluido e naturale.
- JavaScript sarà il cuore dell'interazione: intercetterà il movimento del mouse all'interno della finestra del browser e aggiornerà in tempo reale la posizione del testo sullo schermo.
Il risultato finale sarà un testo che segue il cursore con un leggero ritardo, creando un effetto elegante e moderno. Muovendo il mouse all'interno della pagina, il testo sembrerà "inseguire" il puntatore restando sempre visibile e mantenendo una transizione morbida, senza scatti o movimenti bruschi. Questo tipo di effetto è ideale per evidenziare una call to action
Il codice HTML
Iniziamo partendo dal codice HTML:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Testo che segue il mouse</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Testo che seguirà il movimento del mouse -->
<div class="mouse-text">
Seguimi con il mouse
</div>
<script src="script.js"></script>
</body>
</html>All'interno del <body> è presente un unico elemento div con classe mouse-text che rappresenta il testo destinato a seguire il movimento del mouse all'interno della pagina. Questo elemento verrà successivamente posizionato in modo dinamico tramite CSS e JavaScript, ma a livello HTML rimane volutamente semplice e pulito per garantire massima flessibilità e facilità di personalizzazione.
Subito dopo, viene incluso il file script.js che ha il compito di intercettare i movimenti del cursore e aggiornare in tempo reale la posizione del testo, permettendo così all'elemento di reagire alle interazioni dell'utente senza dover modificare la struttura HTML.
Il codice CSS
Proseguiamo con il codice CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-color: #111;
font-family: Arial, Helvetica, sans-serif;
overflow: hidden;
}
.mouse-text {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
color: #ffffff;
font-size: 32px;
font-weight: bold;
transform: translate(-50%, -50%);
transition: transform 0.1s ease-out;
white-space: nowrap;
}La classe .mouse-text è l'elemento chiave dell'effetto. position: fixed permette al testo di rimanere sempre visibile e indipendente dallo scroll della pagina, mentre pointer-events: none evita che il testo interferisca con le interazioni del mouse. La proprietà transform: translate(-50%, -50%) serve a centrare il testo rispetto alla posizione del cursore, rendendo il movimento più naturale. Infine, la transizione sul transform aggiunge un leggero effetto di smoothing, che rende lo spostamento del testo più fluido e gradevole alla vista.
Il codice JavaScript per l'effetto di testo
Infine concludiamo con il codice JS:
// Selezioniamo l'elemento di testo
const mouseText = document.querySelector(".mouse-text");
// Ascoltiamo il movimento del mouse sull'intera finestra
document.addEventListener("mousemove", (event) => {
const x = event.clientX;
const y = event.clientY;
// Aggiorniamo la posizione del testo
mouseText.style.left = `${x}px`;
mouseText.style.top = `${y}px`;
});Nel primo passaggio selezioniamo l'elemento HTML con classe .mouse-text, che rappresenta il testo da spostare sullo schermo. Successivamente utilizziamo addEventListener per intercettare l'evento mousemove, che viene attivato ogni volta che l'utente muove il cursore all'interno della finestra del browser.
All'interno della funzione, event.clientX ed event.clientY restituiscono le coordinate orizzontali e verticali del mouse rispetto alla viewport. Questi valori vengono poi assegnati dinamicamente alle proprietà left e top dell'elemento di testo, permettendogli di seguire con precisione il movimento del cursore. Grazie alle regole CSS viste in precedenza, lo spostamento risulta fluido e visivamente armonioso, senza necessità di calcoli complessi o librerie esterne.
Il risultato finale ottenuto
Dopo aver integrato HTML, CSS e JavaScript, il risultato è un testo che segue il cursore in modo fluido all'interno della pagina. Muovendo il mouse, il testo si sposta in tempo reale, mantenendo un leggero ritardo grazie alla transizione CSS applicata al transform, il che conferisce un movimento naturale e armonioso senza scatti.
Questo effetto permette di creare interazioni coinvolgenti, ad esempio evidenziando call to action o arricchendo sezioni di landing page e portfolio. Il codice rimane semplice e leggero: il testo può essere personalizzato in dimensioni, colore e font, e il comportamento può essere ulteriormente affinato regolando la durata della transizione per aumentare o diminuire la "leggerezza" del movimento.
In questa guida abbiamo imparato a realizzare un testo interattivo che segue il mouse usando HTML, CSS e JavaScript. L'effetto, semplice da implementare ma visivamente d'impatto, aggiunge dinamicità e personalità a qualsiasi pagina web. Grazie alla facilità di personalizzazione di font, colore e velocità del movimento, è possibile adattarlo facilmente a diversi progetti, rendendo l'esperienza dell'utente più coinvolgente e moderna.
