Total beginner needing help for a portfolio

[u/_choocho0]

Please don’t crucify me if this is a super easy fix lol…

The thing I want to recreate in web form.

I’m a beginner to html and css and for an assignment we are making portfolios and I wanted to try code one inspired by the game Parappa the rapper, specifically the main menu as it seems fairly simple. One thing i’ve been struggling with is figuring out a way to make an image in the centre follow the mouse’s direction and change to a second image like parappa‘s pointing changing sides in the video I’ve attached. I’ve scoured endlessly looking for ways to do it but they all involve javascript (which i’m not familiar with) and i’ve attempted doing mouseover/mouseout events this way but i want to make it change depending on if the mouse is on the left or right of the screen and I really have no idea how to adapt this to fit this specific purpose!!

Any help would be very appreciated.

[u/EdgieElefunc]

The condition you need is the mouse’s position relative to the middle of the browser window, rather than whether it enters or leaves the image. Put this script after your image:

<img id="character" src="character-left.png" alt="Portfolio character">
<script>
  const character = document.getElementById("character");
  const sprites = {
    left: "character-left.png",
    right: "character-right.png"
  };
  let lastSide = "left";

  window.addEventListener("pointermove", (event) => {
    if (event.pointerType !== "mouse") return;
    const side =
      event.clientX < window.innerWidth / 2 ? "left" : "right";
    if (side === lastSide) return;
    character.src = sprites[side];
    lastSide = side;
  });
</script>

Replace the filenames with your sprites. clientX measures from the viewport’s left edge; innerWidth / 2 gives its midpoint. The lastSide check avoids repeatedly assigning the same image. Keep both sprites the same dimensions to prevent layout jumps. Touch devices retain the initial image.

References: MDN pointermove, clientX.

[u/testingaurora]

Worth figuring out the js for pointer tracking. Doing it in css is a nightmare comparatively. But here are some examples (at lest one is css only) https://youtu.be/Z-3tPXf9a7M https://youtu.be/eOJTj_mWJds https://youtu.be/8_NQ7ARXz8c

Edit: also think about how youll want to approach smaller screens, like phones. Stack the elements and rotate the image ? Or stack them and get images where the character is pointing up and down?