Show x & y position of mouse interaction

Hey All, I’m curious how would you create this interaction in webflow with low to no code? The site displays the x and y position of the mouse. A client is asking for something similar. I’ve included a screenshots and the link to the site too. Just open the menu on the site and you’ll see it. Appreciate the help.

1 Like

Hello @Jason99 , did you find a solution? I want this feature for a project too. Thank you!

@DimitrisLe @Jason99

You can use this piece of code

<script>
        document.addEventListener('mousemove', function(event) {
            document.getElementById('x-mouse-value').textContent = 'Mouse X: ' + event.clientX;
            document.getElementById('y-mouse-value').textContent = 'Mouse Y: ' + event.clientY;
        });
    </script>

Add this into the page settings within the body part and make sure you have 2 elements with id’s x-mouse-value and y-mouse-value. If you want only the number to appear within that you can delete the part Mouse X: and Mouse Y: but that should do the trick

2 Likes

Wow, thank you @marko-ninja, works like a charm!