Come aggiungere un cursore personalizzato al tuo sito web

Che cos’è un cursore personalizzato?

Un cursore personalizzato è una modifica intenzionale apportata all’icona predefinita che lampeggia e mostra dove punta il mouse o dove devi digitare. Invece di una noiosa linea lampeggiante, puoi aggiungere colori, animazioni attive al passaggio del mouse o effetti quando si fa clic. Su un computer, puoi modificare il cursore predefinito attraverso le impostazioni. Su una pagina web hai bisogno di un po’ di HTML, CSS e Javascript. Ma non farti intimidire.

Qual è lo scopo di un cursore personalizzato?

Un cursore personalizzato rende unico il tuo sito web. I cursori personalizzati guidano i visitatori mentre interagiscono con la pagina web tramite frecce, messaggi di aiuto, guide, barre di avanzamento e così via. Un cursore personalizzato sostituisce il cursore predefinito utilizzato dal browser dell’utente, rendendo la pagina più interessante e aiutando gli utenti a capire cosa succede se fanno clic su un collegamento o trascinano un oggetto.

Sì. Un cursore personalizzato è sicuro. Tuttavia, solo perché un cursore CSS è sicuro non significa che il tuo visitatore lo saprà. Può essere che troppa creatività faccia esitare l’utente.

Ad esempio, se utilizzi troppe animazioni o segnali intermittenti quando un visitatore sposta il mouse, questo potrebbe fargli credere che qualcosa non va. Ricordati che lo scopo di un cursore personalizzato è quello di guidare l’utente e comunicare con lui. Se le analisi web mostrano che i clienti chiudono più spesso il tuo sito web da quando hai aggiunto la personalizzazione, dovresti riconsiderare alcuni di quei cambiamenti.

Anche se i cursori personalizzati sono sicuri, devi prestare molta attenzione quando scarichi i cursori dai vari siti. In generale, non è mai sicuro scaricare codici o file da siti web che non conosci. Prima di scaricare un cursore personalizzato da un sito web che offre il download gratuito, fai alcune ricerche per assicurarti che la pagina abbia una buona reputazione. Meglio ancora, continua a leggere per vedere come creare da solo un cursore CSS che si adatti alle tue esigenze. È solo un paio di righe di codice che puoi creare anche se sei un principiante.

Come posso personalizzare il cursore sul mio sito web?

Esistono due modi principali per creare un cursore personalizzato del mouse. Puoi usare CSS o JavaScript. Prima di aggiungere CSS o JavaScript, devi andare allo script CSS che vuoi modificare. Se usi il builder di pagine web Mailchimp, vai al pannello con le sezioni Add (Aggiungi) e Edit Web Page (Modifica pagina web) nel Builder di pagine web Mailchimp.

Non avere timori. È una semplice modifica. Ecco come farlo:

1. Accedi alla dashboard del sito web e fai clic su Edit Site (Modifica sito).
2. Passa il mouse sulla pagina che vuoi modificare e fai clic su Edit Page (Modifica pagina).
3. Nel Website Builder di Mailchimp, fai clic sul pannello Sections (Sezioni). Il pannello si espanderà per mostrare le sezioni della pagina web.
4. Passa il mouse su qualsiasi sezione del pannello per visualizzare l’area della pagina.
5. Fai clic sulla sezione in cui vuoi personalizzare il cursore per visualizzare le opzioni di stile.
6. Fai clic su Edit (Modifica) per aprire la sezione e apportare le modifiche al codice CSS.

Come creare un cursore personalizzato usando CSS

CSS ha una proprietà per personalizzare i cursori. Puoi usare la proprietà del cursore nella sezione del corpo di CSS per rendere il puntatore del mouse più interessante. Avrai bisogno di un’immagine in formato PNG, JPEG o SVG. Poi usa il seguente snippet di codice nel CSS della sezione che vuoi personalizzare per modificare il puntatore in un grafico a scelta:

body { cursor: url(‘YourCursorImage.png'), auto; }

La proprietà del cursore consente di specificare quale dei vari cursori apparirà. L’“auto” predefinito deve essere elencato per ultimo. Ciò consente al browser dell’utente di visualizzare il cursore predefinito se nient’altro funziona.

Di seguito è riportata una tabella con alcune opzioni disponibili con CSS. Usa la sintassi:

cursor: value, auto;

Ad esempio, se vuoi rendere il cursore del mouse un cerchio blu che indica all’utente di attendere, usa il seguente statement. L’aggiunta di “auto” alla fine dello statement offre al browser l’opzione di fallback solo nel caso in cui non sappia come interpretare quel particolare valore.

cursor: progress, auto;

Questi sono solo alcuni dei centinaia di valori che puoi usare con la proprietà del cursore CSS. Per un elenco più completo, vai alla pagina Mozilla dello sviluppatore.

La personalizzazione del colore è anche un ottimo modo per rendere il tuo cursore CSS interessante, specialmente se i colori seguono le linee guida del tuo brand. È possibile modificare il colore o la dimensione nello script CSS. Fai attenzione a non rendere il puntatore del mouse troppo grande o difficile da vedere sullo sfondo della pagina web.

Come creare un cursore personalizzato usando JavaScript

Devi modificare il DOM per personalizzare il cursore in JavaScript. Il primo passaggio consiste nel creare una divisione nel codice HTML:

<div class="cursor pointed"></div>

Una volta impostata la sezione div, puoi usare gli statement Javascript per fare in modo che il cursore personalizzato faccia ciò che vuoi con un evento di spostamento del mouse. (Si tratta solo di un modo di dire fantasioso quando l’utente sposta il mouse o fa clic da qualche parte sulla pagina web.) Avrai bisogno di CSS per nascondere il cursore predefinito e per impostare sia le coordinate X che Y. Ecco un esempio della sintassi di cui avrai bisogno.

body{ background-color: #1E1C44; cursor: none; }

.pointed{ width: 12px; height: 12px; background-color: red; border-radius: 25%; }

window.addEventListener('mousemove', moveCursor)

Nota: Usa il valore “none” per nascondere il cursore predefinito e mostrare invece il tuo. L’“event listener” risponderà ogni volta che un utente del sito web sposta il cursore del mouse.

Cursore personalizzato per Chrome

Chrome è il browser web più popolare, quindi iniziamo con i plugin per cursore personalizzato di Chrome. Ci sono circa un centinaio di opzioni gratuite, tra cui Minecraft, Lightabers e Cartoons.

Se vuoi, puoi anche utilizzare una tua immagine come cursore, se soddisfa le linee guida sulle dimensioni. Idealmente devi utilizzare un’immagine di 16 x 16 o 32 x 32 pixel. Puoi utilizzare un’immagine grande massimo 128 x 128, ma prova prima con dimensioni più piccole. Per una visualizzazione ottimale, Chrome consiglia un’immagine con uno sfondo chiaro. (Se lo sfondo non è chiaro, coprirà parte del tuo sito web.) L’estensione è disponibile sul Chrome Web Store di Google. Dopo aver installato l’estensione, dovrai aggiornare la pagina web.

Ci sono alcune importanti limitazioni per il cursore personalizzato per Chrome. Innanzitutto, non funzionerà sulla maggior parte delle pagine del negozio. In secondo luogo, è limitato alla navigazione in Chrome. Quindi l’estensione di Chrome non è ideale per i web designer, ma è un modo sbrigativo per vedere come appaiono i diversi puntatori del mouse sul tuo sito web.

Quali browser supportano i cursori CSS e i cursori personalizzati del mouse?

Tutti i browser moderni sanno come supportare un cursore CSS personalizzato. Se un utente utilizza un browser meno recente, l’“auto” alla fine della sintassi consentirà di visualizzare il cursore predefinito per quel browser.

Browser compatibili con proprietà cursore CSS:

• Apple Safari 1.2 e versioni successive
• Firefox: tutte le versioni
• Google Chrome: tutte le versioni
• Internet Explorer 4.0 e versioni successive
• Opera 7 e versioni successive

Far risaltare un sito web con un cursore personalizzato. Personalizzare il cursore è solo uno dei molti modi in cui è possibile rendere la pagina web più interattiva e coinvolgente. Rendendo il tuo sito web accessibile e intuitivo, attirerai e manterrai i visitatori. Non aver paura di sperimentare, libera la tua creatività!