I have created a simple gradient ball.
what I want to do is if I move the mouse cursor anywhere on the page created ball flows along with the mouse cursor. I have added onmousemove event to the JS but it does't really work properly.
please show me the error in my code.
thank you!
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 you don't need to add the suffix "on"
onmousemove mousemovelet 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>another simplier solution can be using CSS
cursorproperty:
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
but for better results you need to use javascript (especially if you want to move html elements, becausecursorneed a image)
Here is a CSS only idea if you want. You used the cursor property with an embedded SVG where you add your div with its CSS using a 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;
}
Demo: https://codepen.io/t_afif/full/wvmaYex
Related: https://twitter.com/ChallengesCss/status/1536669474140602369
You don't need an eventListener for this. you can just use document.onmousemove.
Then the next issue is that you added the eventlistener to the ball not the window.
Last issue was, that you you sued pageX and pageY while the mouse position is called with clientX and 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>