0

Mi circulo div no persigue a mi cursor, esta es la funcion que uso para cambiar dinamicamente el atributo css left y top para crear la animacion de que el circulo div siga las coordenadas de mi cursor.

const onLoad = () => {
window.addEventListener("load", function () {
    seguirCursor()
    })
}

const seguirCursor = () => {

$("document").mousemove(function (event) {
    let cursor = $("#cursor");//un circulo div que persigue a mi cursor
    cursor.css("left",event.clientX)
        .css("top",event.clientY);
        //logs para ver que coordenada esta mi cursor
        console.log(event.clientX);
        console.log(event.clientY);

   });

}

ni siquiera me refleja las coordenadas en la consola.

2 respuestas 2

1

si usas jquery es mejore agregar el siguiente codigo para poder empezar a usarlo

$(document).ready(function(){
   //aqui dentro la logica de tu aplicacion
})

comunmente los archivos jquery son llamados desde el head, por eso es que primero espera que el documento termine de cargarse para poder ejecutar la logica que hay dentro de tal archivo, no se si el codigo que muestras es tu archivo completo, pero el primer error que veo es que creas una constante onLoad que no es llamada nunca, es este caso la función seguirCursor() no debe cargarse y por eso es que ni siquiera te muestra el mensaje por consola

//Prueba con este codigo:

$(document).ready(function(){

  $("document").on('mousemove', (event)=>{
     let cursor = $("#cursor"); //un circulo div que persigue a mi cursor
     cursor.css("left",event.clientX)
    .css("top",event.clientY);
     
    console.log(event.clientX);
    console.log(event.clientY);

   });
})
0

Encontré una mejor manera de hacer y corrigiendo el $("document") por $(document) también cargando el DOM por medio de jQuery en vez de cargarlo con addEventListener() entonces el código quedaría funcionando así:

const onLoad = () => {
return $(document).ready(function () {
    seguirCursor();
   });
}

const seguirCursor = () => {
   let cursor = $("#cursor");//el circulo div a mover
   $(document).mousemove(function (event) {
      cursor.css("left", event.clientX)
            .css("top", event.clientY);
   });

}
1
  • No cargas el dom en todo caso leerias si se ha cargado el dom
    – user128299
    Commented el 3 jul. 2020 a las 20:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.