Div che segue il mouse con Javascript

Mattepuffo's logo
Div che segue il mouse con Javascript

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!


Condividi

Commentami!