He creado una bola de degradado simple.
lo que quiero hacer es si muevo el cursor del mouse en cualquier lugar de la página, la bola creada fluye junto con el cursor del mouse. He agregado el evento onmousemove al JS pero realmente no funciona correctamente.
por favor muéstrame el error en mi código.
¡gracias!
let cursor=document.querySelector('.ball'); cursor.addEventListener('onmousemove', (e)=>{ let x= e.pageX; let y= e.pageY; cursor.style.left= x+'px'; cursor.style.top= y+'px'; }); .ball{ background-image: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 0%, rgba(4,116,191,1) 60%, rgba(0,212,255,1) 97%); height: 70px; width: 70px; border-radius: 50%; box-shadow: 0px 0px 13px 1px rgba(9,9,121,0.73); transition: 0.1s; pointer-events: none; position: fixed; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="stylesheet.css"> <title>Document</title> </head> <body> <div class="ball"></div> <script src="script.js"></script> </body> </html>cursor.addEventListener(...)window.addEventListener(...)event-listener , no necesita agregar el sufijo "on"onmousemovemousemove del ratón let cursor = document.querySelector('.ball'); window.addEventListener('mousemove', (e) => { let x = e.pageX; let y = e.pageY; cursor.style.left = x + 'px'; cursor.style.top = y + 'px'; }); .ball { background-image: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 0%, rgba(4, 116, 191, 1) 60%, rgba(0, 212, 255, 1) 97%); height: 70px; width: 70px; border-radius: 50%; box-shadow: 0px 0px 13px 1px rgba(9, 9, 121, 0.73); transition: 0.1s; pointer-events: none; position: fixed; } <div class="ball"></div>otra solución más simple puede ser usar la propiedad del
cursorCSS:
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
pero para obtener mejores resultados, debe usar javascript (especialmente si desea mover elementos html, porque elcursornecesita una imagen)
Aquí hay una idea de CSS solo si lo desea. Usó la propiedad del cursor con un SVG incrustado donde agrega su div con su CSS usando un foreignObject
html { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="width:70%;height:70%;margin:15%;border-radius:50%;background:linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 0%, rgba(4,116,191,1) 60%, rgba(0,212,255,1) 97%);box-shadow: 0px 0px 13px 1px rgba(9,9,121,0.73);" ></div></foreignObject></svg>') 40 40, auto; }Demostración: https://codepen.io/t_afif/full/wvmaYex
Relacionado: https://twitter.com/ChallengesCss/status/1536669474140602369
No necesita un eventListener para esto. simplemente puede usar document.onmousemove .
Luego, el siguiente problema es que agregó el detector de eventos a la bola, no a la ventana.
El último problema fue que demandó a pageX y pageY mientras se llama a la posición del mouse con clientX y clientY
let cursor=document.querySelector('.ball'); document.onmousemove = function(e) { let x= e.clientX; let y= e.clientY; cursor.style.left= x+'px'; cursor.style.top= y+'px'; }; .ball{ background-image: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 0%, rgba(4,116,191,1) 60%, rgba(0,212,255,1) 97%); height: 70px; width: 70px; border-radius: 50%; box-shadow: 0px 0px 13px 1px rgba(9,9,121,0.73); transition: 0.1s; pointer-events: none; position: fixed; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="stylesheet.css"> <title>Document</title> </head> <body> <div class="ball"></div> <script src="script.js"></script> </body> </html>