Div che segue il mouse con Javascript
In questo articolo vediamo come fare in modo che un div segua il mouse usando Javascript.
Il codice dovrebbe funzionare anche per i device touch; come vedrete c'è una funzione apposita per fare questo controllo.
Infine, metteremo anche un pò di CSS.
Cominciamo da Javascript:
window.onload = function () {
let mouse = document.getElementById('mouse');
function isTouch() {
try {
document.createEvent('TouchEvent');
return true;
} catch (e) {
return false;
}
}
const move = (e) => {
try {
var y = !isTouch() ? e.pageY : e.touches[0].pageY;
var x = !isTouch() ? e.pageX : e.touches[0].pageX;
} catch (e) {
}
mouse.style.left = x - 30 + "px";
mouse.style.top = y - 30 + "px";
};
document.addEventListener("mousemove", (e) => move(e));
document.addEventListener("touchmove", (e) => move(e));
}
Come potete vedere, il controllo lo facciamo cercando di creare l'evento TouchEvent; se non ci riesce vuol dire che siamo un dispositivo desktop.
Per quanto riguarda il CSS:
#mouse {
border: 1px solid black;
background-color: #0a51bc;
height: 10px;
width: 10px;
position: absolute;
}
Dimensioni e colore non sono propriamente obbligatori, ma consigliati, sennò sarebbe brutto l'effetto.
Il posizionamento invece è obbligatorio per far funzionare lo spostamento con Javascript.
Infine il div:
<div id="mouse"></div>
Enjoy!
javascript css html touchevent touchmove mousemove
Commentami!