Imprimir Página - Efecto deslizamiento que sigue al cursor. JS

Título: Efecto deslizamiento que sigue al cursor. JS
Publicado por: Nvyx24 en 10 Mayo 2017, 20:44 pm

Hola a todos. Primero de todo decir que estoy empezando con JS en desarrollo web.

Estoy haciendo un script donde una imagen sigue la posición del cursor.

Código

function sigueCursor (){
	corX = window.event.clientX;
	corY = window.event.clientY;
	img.style.left = corX+"px";
	img.style.top = corY+"px";
}

Aplicando esta función al evento onmousemove de la etiqueta html del código HTML.

Pero me gustaria que esta imagen siguiera la posición del cursor con dicho retraso, creando así una especie de efecto "aura" o "deslizamiento" (no se si me explico como es debido...).
He intentado crear este efecto de mil maneras diferentes, pero por lo que veo no entiendo muy bien como funcionan los eventos...
Si aplico la función setTimeout, el retraso solo me lo hace al principio del movimiento estando el cursor previamente parado, si el cursor sigue en movimiento la imagen también lo hace. He probado también guardando las coordenadas en un array, pero solamente me guarda el primer valor de la posición (tanto en x como en y) y se ejecuta de la misma forma que con variables normales.

¿Alguien me podria dar una idea de como conseguirlo?

¡Muchas gracias por la ayuda y por vuestro tiempo!

Título: Re: Efecto deslizamiento que sigue al cursor. JS
Publicado por: ThinkByYourself en 10 Mayo 2017, 22:38 pm

Ah pues ahora si puedes utilizar las transitions para hacerlo te podrías ahorrar algunos cálculos creo.

https://www.w3schools.com/css/css3_transitions.asp (https://www.w3schools.com/css/css3_transitions.asp)

Por aportar algo

Título: Re: Efecto deslizamiento que sigue al cursor. JS
Publicado por: Nvyx24 en 16 Mayo 2017, 20:18 pm

Muchas gracias, la verdad que mi idea era intentarlo hacer solamente mediante javascript, pero con esto he conseguido hacer algo parecido a lo que buscaba.

Muchísimas gracias por tu tiempo, dejo el código por si a alguien le pueda interesar.

Código

<!doctype html>
<html onmousemove="sigueCursor()">
<head>
	<meta charset="utf-8">
	<title>Sigue Cursor</title>
	<style type="text/css"> 
		#img{
			position: absolute; 
			transition: all 0.5s ease-in-out 0.2s;
		}
	</style>
	<script type="text/javascript">
		function sigueCursor(){
			corX = window.event.clientX;
			corY = window.event.clientY;
			img.style.left = corX+"px"; 
			img.style.top = corY+"px";
		}
	</script>
</head>
 
<body>
	<img src="imagen.png" id="img" />
</body>
 
</html>

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Nvyx24 en 10 Mayo 2017, 20:44 pm