Fase 3: aggiungiamo interattività con JavaScript

Siamo giunti allo step finale: dobbiamo far muovere i nostri cursori e attivare l’effetto di click. Come? Semplicissimo, con il linguaggio Javascript! Creiamo il file script.js:

const cursor = document.querySelector('.cursor');
const cursorDot = document.querySelector('.cursor-dot');

document.addEventListener('mousemove', e => {
    const mouseX = e.clientX;
    const mouseY = e.clientY;

    cursorDot.style.left = `${mouseX}px`;
    cursorDot.style.top = `${mouseY}px`;

    cursor.style.left = `${mouseX}px`;
    cursor.style.top = `${mouseY}px`;
});

document.addEventListener('click', e => {
    const clickEffect = document.createElement('div');
    clickEffect.className = 'cursor-click-effect';
    clickEffect.style.left = `${e.clientX - 30}px`;
    clickEffect.style.top = `${e.clientY - 30}px`;
    document.body.appendChild(clickEffect);

    setTimeout(() => {
        clickEffect.remove();
    }, 400); // Rimuove l'elemento dopo l'animazione
});

Spiegazione:

• const cursor e const cursorDot: selezioniamo i due elementi div con le classi .cursor e .cursor-dot e li memorizziamo nelle variabili cursor e cursorDot.
• document.addEventListener(‘mousemove’, e => {…}): aggiungiamo un evento che rileva ogni movimento del mouse. La funzione anonima riceve l’evento “e” come parametro, che contiene le coordinate del mouse.
  • const mouseX e const mouseY: estraiamo le coordinate X e Y del mouse dal parametro “e”.
  • cursorDot.style.left/top: posizioniamo il cursore piccolo (cursorDot) alle coordinate X e Y del mouse.
  • cursor.style.left/top: posizioniamo il cursore grande (cursor) alle stesse coordinate.
• document.addEventListener(‘click’, e => {…}): aggiungiamo un evento che rileva il click del mouse.
  • const clickEffect = document.createElement(‘div’);: creiamo un nuovo div per l’effetto di click.
  • clickEffect.className = ‘cursor-click-effect’;: applichiamo la classe CSS .cursor-click-effect al nuovo div.
  • clickEffect.style.left/top: posizioniamo l’effetto di click leggermente decentrato rispetto al punto in cui si è verificato il click (sottraendo 30px per centrarlo).
  • document.body.appendChild(clickEffect);: aggiungiamo l’effetto di click al body della pagina.
  • setTimeout(() => { clickEffect.remove(); }, 400);: dopo 400 millisecondi (il tempo dell’animazione), rimuoviamo l’elemento div dell’effetto di click dal DOM per pulire la memoria.

Procedendo con questo codice, dovresti aver ultimato la fase 3 del nostro tutorial. E adesso? Non ci resta che l’ultimo vero step, quello probabilmente più entusiasmante: la fase di test!

Prova il tuo cursore personalizzato!

È il momento di testare il tutto! Apri il tuo file HTML in un browser e inizia a muovere il mouse. Dovresti vedere il cursore personalizzato seguire i tuoi movimenti; cliccando, noterai l’animazione di espansione che, con l’utilizzo del linguaggio html, CSS e Javascript, sei stato in grado di realizzare in soli 3 step!

Questa è una fantastica aggiunta per rendere il tuo sito web più dinamico e memorabile. Sentiti libero di sperimentare con colori, dimensioni e animazioni per adattarlo al meglio al tuo progetto e divertiti a esplorare nuove possibilità e a creare qualcosa di unico! 

Questo tutorial ha stuzzicato la tua voglia di imparare e sperimentare? Corri a vedere il prossimo!