parallax.js

// Some dynamic input to set where the origin should be

// Globals
let origin = { x: 0, y: 0 };
let layers = [];

// Inits
calibrateOrigin();
window.addEventListener("onresize", calibrateOrigin);

for (let i = 1; i < 7; i++) {
  let layer = document.getElementsByClassName(`layer${i}`);
  layers.push(layer);
}

document.onmousemove = handleMouseMove;

function handleMouseMove(event) {
  var xShift = origin.x - event.pageX;
  var yShift = origin.y - event.pageY;
  for (let i = 0; i < 6; i++) {
    translateElements(layers[i], (7 - i) * 1.8, xShift, yShift);
  }
}

function translateElements(array, layer, x, y) {
  let xShift = x / layer;
  let yShift = y / layer;
  for (let i = 0; i < array.length; i++) {
    array[i].style.transform = `translate(${xShift}px, ${yShift}px)`;
  }
}

//
function calibrateOrigin() {
  origin.x = window.innerWidth / 2;
  origin.y = window.innerHeight / 2;
}