Magnetic Halo
Un anello segue il puntatore con un leggero ritardo, mentre i cerchi numerati vicini si inclinano verso di lui.
Anteprima interattiva
Cos’è Magnetic Halo?
Muovi il mouse sulla pagina: un anello segue il tuo percorso con un leggero ritardo. I cerchi numerati si spostano delicatamente verso il puntatore, facendo sembrare l’area collegata ai tuoi movimenti.
L’effetto può aprire un portfolio, una landing page sperimentale o una sezione che invita le persone a esplorare prima di leggere altro.
Come è costruito
La pagina osserva la posizione del puntatore nell’area a tutto schermo e la usa come punto di arrivo per l’anello. L’anello si avvicina gradualmente a quel punto durante l’animazione, creando una scia morbida. JavaScript controlla anche la posizione dei tre cerchi numerati e li sposta leggermente verso il puntatore. Quando il puntatore esce, i cerchi tornano al loro posto.
Ideale per
- Una homepage portfolio per presentare un designer o uno studio creativo
- L’apertura interattiva di un sito sperimentale
- L’introduzione visiva di una rivista digitale o di un progetto editoriale
- Una vetrina di progetti che invita a esplorare la pagina prima di leggere altro
Accessibilità
Il puntatore nascosto può rendere la pagina meno chiara per chi usa mouse o trackpad, e l’effetto non offre un’alternativa da tastiera. Tutti i contenuti e i collegamenti importanti devono funzionare senza questa interazione. È utile prevedere il puntatore normale e un’opzione con meno movimento.
Prestazioni
L’implementazione esegue un’animazione continua e aggiorna l’anello quando il puntatore si muove. Inoltre controlla e sposta solo tre elementi numerati, quindi il lavoro richiesto è contenuto. L’animazione sempre attiva può comunque essere sospesa o semplificata sui dispositivi meno potenti.
Codice sorgente
Esplora, copia e riutilizza HTML, CSS e JavaScript originali.
<main class="cursor-field" id="field"><div class="halo" id="halo"></div><div class="node n1">01</div><div class="node n2">02</div><div class="node n3">03</div><p>drag your attention<br><span>through the field</span></p></main>*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#e9e5dc;font-family:Arial,sans-serif}body{min-height:100vh;display:grid;place-items:center}.cursor-field{width:100%;height:100vh;min-height:300px;position:relative;overflow:hidden;cursor:none;color:#262421}.halo{position:absolute;width:88px;height:88px;border:1px solid #262421;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);transition:width .3s,height .3s;background:#2624210a}.halo:after{content:'';position:absolute;inset:32px;background:#e85d3f;border-radius:50%}.node{position:absolute;width:50px;height:50px;border:1px solid #262421;border-radius:50%;display:grid;place-items:center;font:10px monospace;transition:transform .25s ease}.n1{left:18%;top:30%}.n2{right:20%;top:22%}.n3{left:43%;bottom:22%}.cursor-field p{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(24px,5vw,52px);line-height:.95;text-align:center;margin:0;letter-spacing:-.06em}.cursor-field p span{color:#e85d3f}.cursor-field.active .halo{width:120px;height:120px}const field=document.querySelector('#field'),halo=document.querySelector('#halo'),nodes=[...document.querySelectorAll('.node')];let tx=0,ty=0,x=0,y=0;field.addEventListener('pointermove',e=>{const r=field.getBoundingClientRect();tx=e.clientX-r.left;ty=e.clientY-r.top;field.classList.add('active');nodes.forEach(n=>{const nr=n.getBoundingClientRect(),cx=nr.left+nr.width/2-r.left,cy=nr.top+nr.height/2-r.top;const dx=tx-cx,dy=ty-cy,d=Math.max(50,Math.hypot(dx,dy));n.style.transform=`translate(${dx/d*16}px,${dy/d*16}px)`})});field.addEventListener('pointerleave',()=>{field.classList.remove('active');nodes.forEach(n=>n.style.transform='')});function loop(){x+=(tx-x)*.16;y+=(ty-y)*.16;halo.style.left=x+'px';halo.style.top=y+'px';requestAnimationFrame(loop)}loop();