# Image moving according to cursor position

**URL:** https://forum.readymag.com/t/image-moving-according-to-cursor-position/2954
**Category:** Custom code
**Created:** [May 21, 2024, 6:03pm UTC](https://forum.readymag.com/t/image-moving-according-to-cursor-position/2954 "2024-05-21T18:03:22Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![batdmt](https://avatars.discourse-cdn.com/v4/letter/b/7ea924/32.png) [@batdmt](https://forum.readymag.com/u/batdmt)
#### Post date: [May 21, 2024, 6:03pm UTC](https://forum.readymag.com/t/image-moving-according-to-cursor-position/2954/1 "2024-05-21T18:03:22Z")

</div>

Hello everyone! Please I need your help. I’d like to make an animation on my Readymag website that I can’t do (I suck at coding…).  
I’d like my images to move according to the position of the cursor when it’s over them.  
I found this site as an example: [https://www.wow-showroom.com/mouse-parallax](https://www.wow-showroom.com/mouse-parallax)  
Does anyone have a solution? Thanks in advance! 🙏

---

<div class="post-metadata">

### Author: ![batdmt](https://avatars.discourse-cdn.com/v4/letter/b/7ea924/32.png) [@batdmt](https://forum.readymag.com/u/batdmt)
#### Post date: [May 22, 2024, 9:25am UTC](https://forum.readymag.com/t/image-moving-according-to-cursor-position/2954/2 "2024-05-22T09:25:48Z")

</div>

I’ve just realized that the name of the effect I’m looking for is “mouse parallax” 😅.  
Can anybody help me?

---

<div class="post-metadata">

### Author: ![Genevieve\_Bachelet](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/genevieve_bachelet/32/3386_2.png) [@Genevieve\_Bachelet](https://forum.readymag.com/u/Genevieve_Bachelet)
#### Post date: [June 20, 2025, 1:05pm UTC](https://forum.readymag.com/t/image-moving-according-to-cursor-position/2954/3 "2025-06-20T13:05:34Z")

</div>

Hi! Ik this is an old post but I was looking for mouse parallax as well and this seems to work? in case anyone else wanted it! replace what’s in data id with the data id of the images and you can change the x and y to adjust

```auto
<script>
document.addEventListener('mousemove', (e) => {
  const x = e.clientX / window.innerWidth;
  const y = e.clientY / window.innerHeight;
  
  // Image 1 - Moves with mouse (subtle)
  const img1 = document.querySelector('[data-id="68540738fe35425cd632b636"]');
  if(img1) img1.style.transform = `translate(${x * 10}px, ${y * 10}px)`;
  
  // Image 2 - Moves opposite (subtle)
  const img2 = document.querySelector('[data-id="6854073efe35425cd632b99f"]');
  if(img2) img2.style.transform = `translate(${x * -8}px, ${y * -8}px)`;
  
  // Image 3 - Moves more with mouse
  const img3 = document.querySelector('[data-id="6854073fbe7b73d1fee087c4"]');
  if(img3) img3.style.transform = `translate(${x * 15}px, ${y * 15}px)`;
  
  // Image 4 - Moves opposite (more)
  const img4 = document.querySelector('[data-id="6854083d9e112266688f5836"]');
  if(img4) img4.style.transform = `translate(${x * -12}px, ${y * -12}px)`;
});
</script>

<style>
[data-id^="68540"] {
  transition: transform 0.3s ease-out;
  will-change: transform;
}
</style>

```