<div class="screen">
  <div class="item" data-speed="3"></div>
  <div class="item" data-speed="5"></div>
  <div class="item" data-speed="-3"></div>
</div>

body {
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.screen {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 70vw;
}

.item {
  width: 10vw;
  height: 10vw;
  background: blue;
}

window.addEventListener("mousemove", parallax);

function parallax(e) {
  document.querySelectorAll(".screen .item").forEach((layer) => {
    let speed = layer.dataset.speed;
    let x = (window.innerWidth - e.pageX * speed) / 100;
    let y = (window.innerHeight - e.pageY * speed) / 100;

    layer.style.transform = `translateX(${x}px) translateY(${y}px)`;
  });

  requestAnimationFrame(parallax);
}