How to Create a simple Cursor tracking ball with JS?-CodePudding

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 onm ousemove 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 ></div>

    <script src="script.js"></script>
</body>
</html>

CodePudding user response：

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 ></div>

    <script src="script.js"></script>
</body>
</html>

CodePudding user response：

you need to add the eventlistener NOT the element you need to move,
but to the page or parent element
❌ cursor.addEventListener(...)
✅ window.addEventListener(...)

on event-listener you don't need to add the suffix "on"
❌ onmousemove
✅ mousemove

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 ></div>

another simplier solution can be using CSS cursor property:
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, because cursor need a image)

CodePudding user response：

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