customParallax.js

function paperParallax () {
  const paperWrapper = document.getElementById('paperWrapper');
  var   divs         = paperWrapper.getElementsByTagName('div');
        divs         = Array.from(divs);
  var   center       = {
    x: window.innerWidth / 2,
    y: window.innerHeight / 2
  };

  document.addEventListener('mousemove', (e) => {
    const { clientX, clientY } = e;
    var   ratioX               = (clientX - center.x) / center.x;
    var   ratioY               = (clientY - center.y) / center.y;
    divs.map((elem, i) => {
      if (i % 2 == 0) {
        elem.style.marginLeft = -ratioX * 10 + "px";
        // elem.style.marginTop  = -ratioY * 20 + "px";
      } else if (i % 3 == 0) {
        elem.style.marginLeft = -ratioX * 20 + "px";
        // elem.style.marginTop  = -ratioY * 17 + "px";
      } else if (i % 5 == 0) {
        elem.style.marginLeft = ratioX * 17 + "px";
        // elem.style.marginTop  = -ratioY * 12 + "px";
      } else if (i % 7 == 0) {
        elem.style.marginLeft = -ratioX * 12 + "px";
        // elem.style.marginTop  = -ratioY * 22 + "px";
      } else {
        elem.style.marginLeft = -ratioX * 22 + "px";
        // elem.style.marginTop  = -ratioY * 10 + "px";
      }
    });
  });
}

function addPapers(numberOfPapers) {
  const paperCount   = numberOfPapers == null ? 50 : numberOfPapers;
  const paperWrapper = document.getElementById('paperWrapper');
  var   node         = null;
  for (let i = 1; i <= paperCount; i++) {
    node = document.createElement("div");
    node.classList.add("paper-"+i);
    paperWrapper.appendChild(node);
  }
}

function initialPositioning(container) {
  var containerStyles = getComputedStyle(document.getElementById('paperWrapper'));
  var center          = {
    x: parseInt(containerStyles.width) / 2,
    y: parseInt(containerStyles.height) / 2
  };
  var randomX, randomY;
  var divs           = paperWrapper.getElementsByTagName('div');
      divs           = Array.from(divs);
  var dividerAmountY = 8;
  var dividerAmountX = 4;
  divs.map((e, l) => {
    randomX      = Math.round(Math.random() * (center.x - center.x/4) * 2);
    randomY      = Math.round(Math.random() * (center.y - center.y/4 )* 2);
    e.style.left = center.x/3 + randomX + 'px';
    e.style.top  = center.y/2 + randomY + 'px';
  });
}