Image moving according to cursor position

Custom code
1

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
Does anyone have a solution? Thanks in advance! :pray:

2

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

3

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

<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>
1 Like