Div follow cursor inside of parent


I have this codepen where I’m trying to make the cursor follow my mouse perfectly inside the box, and as I leave the parent slide, it should stop at the edge and disappear. But when I try to grab coordinates, it gets really buggy? Is there a better way to do this?

===
I’ve narrowed down the issue NOT being slick (thinking the wide slick container was skewing something)…
I’ve also learned (maybe obvious to others) that the getCoords function is returning 0 / 1 sometimes for x/y and that’s the flickering. But I’m not seeing (yet) the reason for that. I’ve console logged the beginning x/y variables inside getXYpos function and they seem to be what’s returning 0 / 1…but it doesn’t make sense to me why :slight_smile: .

x = elm.offsetLeft;
            y = elm.offsetTop;

To take a step back;
Why are you wrapping your variable declaration in a timeout that will reset the value of movingDiv after 5 seconds?

Leftovers from various debugging stuff. It will not remain in the final product. I was trying to make sure other stuff (not shown in this demo) wasn’t affecting it.

Hi there RyanReese,

you may find this link…

https://forums.cutcodedown.com/index.php?topic=31.0

…has some useful insights about offsetTop and offsetLeft. :winky:

coothead

1 Like

Another update…it seems when I remove the transform from .cursor…it seems to stop the flickering. But anytime

Hi :slight_smile: so as I was about to look at this…I made progress. https://codepen.io/ryanreese09/pen/zYYJvVe

I was having issue getting the circle centered on the center of the cursor so I moved the transform to a child element. Now I need to prevent my mousemove event from screwing up when children are hovered on (noticeable in the codepen)

Took a while but I got there in the end! https://codepen.io/ryanreese09/pen/zYYJvVe

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.