help with Custom Mouse Cursor with Tracking

programming web dev
1

I seem to be having issues in Dreamweaver.
Is it me, or is this code not compatible somehow in Dreamweaver?
:thinking:
probably me most likely.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="veiwport" content="width=device-width, initial-scale=1.0">
<title>Cursor Follower</title>
	<style>
		#customCursor {
			--cursorXPos: 0;
			--cursorYPos: 0;
			position: fixed;
			top: -25px;
			left: -25px;
			transform: translated3d(var(--cursorXPos), var(--cursorYPos), 0);
			transition: tranform 2s cubic-bezier(0.75, 0.885, 0.32, 1.275);
			width: 50px
		}
	</style>
</head>
<body>
	<div id="customCursor">
		<img src="UFO.png" alt="customCursor">
	</div>
	<script>
		let mouseX = 0
		let mouseY = 0
		let customCursor = document.querySelector("#customCursor");
		document.addEventListener("mousemove", setMousePosition, false);
		function moveCursor(timestamp){
			customCursor.style.setProperty("--cursorXPos",mouseX + "px");
			customCursor.style.setProperty("--cursorYPos",mouseY + "px");
			requestAnimationFrame(moveCursor);
		}
		function setMousePosition(event){
			mouseX = event.clientX;
			mouseY = event.clientY;
		}
	</script>
	<style>
	</style>
</body>
</html>
2

When you run it in the browser, what happens? Dreamweaver is your code editor, and interactive content typically will not work inside it.

3

The png of a UFO is the only thing that shows up, not even when I downsized it to 50 px.

This is unusual, I have done something similar to this before. For some reason while following the tutorial nothing happens. :smiling_face_with_tear:

4

That is expected unfortunately. You should use your browser as your source of truth for what your page looks like. Dreamweaver’s preview engine doesn’t understand a lot of modern techniques like CSS custom properties, for example.

Using Dreamweaver as a code editor is fine, but you shouldn’t rely on it to give you an accurate preview experience.

5

Well, it’s not just that. Whenever I preview the code on my browser, in my case edge, I still see the same thing. I’m convinced I’m missing something in my code, but I’m not sure.

6

Does your browser’s console show any errors?

7

Not on my side

8

I see what is going on here! You were very close :slight_smile:

In your CSS, it is translate3d (not translated3d):

transform: translated3d(var(--cursorXPos), var(--cursorYPos), 0);

Next, you have your timer loop defined in moveCursor, but you never actually call it to kick it off. Add a call to moveCursor(), and that will get the party started! :partying_face:

Here is my version that works:

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="veiwport" content="width=device-width, initial-scale=1.0">
  <title>Cursor Follower</title>
  <style>
    #customCursor {
      --cursorXPos: 0;
      --cursorYPos: 0;
      position: fixed;
      top: -25px;
      left: -25px;
      transform: translate3d(var(--cursorXPos), var(--cursorYPos), 0);
      transition: tranform 2s cubic-bezier(0.75, 0.885, 0.32, 1.275);
      width: 50px
    }
    img {
      width: 100px;
      height: 100px;
      background-color: black;
    }
  </style>
</head>

<body>
  <div id="customCursor">
    <img alt="customCursor">
  </div>
  <script>
    let mouseX = 0
    let mouseY = 0
    let customCursor = document.querySelector("#customCursor");

    document.addEventListener("mousemove", setMousePosition, false);

    function moveCursor(timestamp) {
      customCursor.style.setProperty("--cursorXPos", mouseX + "px");
      customCursor.style.setProperty("--cursorYPos", mouseY + "px");

      console.log("Code called! " + mouseX + " " + mouseY);

      requestAnimationFrame(moveCursor);
    }

    function setMousePosition(event) {
      mouseX = event.clientX;
      mouseY = event.clientY;

      //console.log("Mouse moving!");
    }

    moveCursor();
  </script>
  <style>
  </style>
</body>

</html>
9

Its working!!

Although I noticed that it doesn’t have that smooth lag transition. Is that another Dreamweaver issue?

10

Another small misspelling :slight_smile: It should be transform.

11

Ah I see, it’s works perfectly!
Thank you!

1 Like
12

Glad it works! I wish there were ways of catching errors in CSS in the same way we can for JavaScript.

13

Same, would definitely make the job easier!

1 Like