parallax image divided

by uto usui

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div class="outer">

  <div class="wraper">
    <div class="inner">
      <div class="line"></div>
      <div class="positioner">
        <div class="image"></div>
      </div>
    </div>  
  </div>
  <div class="wraper">
    <div class="inner">
      <div class="line"></div>
      <div class="positioner">
        <div class="image"></div>
      </div>
    </div>  
  </div>
  <div class="wraper">
    <div class="inner">
      <div class="line"></div>
      <div class="positioner">
        <div class="image"></div>
      </div>
    </div>  
  </div>
  <div class="wraper">
    <div class="inner">
      <div class="line"></div>
      <div class="positioner">
        <div class="image"></div>
      </div>
    </div>  
  </div>
  <div class="wraper">
    <div class="inner">
      <div class="line"></div>
      <div class="positioner">
        <div class="image"></div>
      </div>
    </div>  
  </div>

</div>

SCSS

.outer {
  position: relative;
  z-index: 9;
  height: 100vh;
  background-color: rgba(#000, .6);
}


.wraper {
  position: relative;
  z-index: 4;
  height: 20%;
  overflow: hidden;
}

.inner {
  position: relative;
  z-index: 5;
  width: 100vw;
  height: 100%;
  perspective: 500px;
}

.line {
  height: 1px;
  width: 100%;
  background-color: mix(white, black, 20%);
}

.positioner {
  position: absolute;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0vw;
  top: 0vh;
  //
  .wraper:nth-of-type(2) & {
    top: -20vh;
  }
  .wraper:nth-of-type(3) & {
    top: -40vh;
  }
  .wraper:nth-of-type(4) & {
    top: -60vh;
  }
  .wraper:nth-of-type(5) & {
    top: -80vh;
  }
}

.image {
  position: absolute;
  right: 0%;
  bottom: -5%;
  top: -5%;
  left: 0%;
  width: 110%;
  height: 110%;
background-image: url('https://source.unsplash.com/random/1000x1000/');
  background-size: cover;
  background-position: 50% 50%;
  transform: translate(-5%, -5%);
}

JavaScript

let requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(e) {
  window.setTimeout(e, 1e3 / 60)
}

let mouseInfos = {
      x: 0,
      y: 0,
    },
    oldMouseInfos = {
      x: 0,
      y: 0,
    };

$(window).on('mousemove', function (t) {
 		mouseInfos.x = t.clientX,
    mouseInfos.y = t.clientY;
});


function getMouseToCenterDistance() {
  let t = {
    x: $(window).width() / 2 - mouseInfos.x,
    y: $(window).height() / 2 - mouseInfos.y,
  };
  return t.percentX = t.x / ($(window).width() / 2 / 100),
    t.percentY = t.y / ($(window).height() / 2 / 100),
    t;
}

function mouseInfosChanged() {
  return oldMouseInfos.x != mouseInfos.x || oldMouseInfos.y != mouseInfos.y;
}

function mousePos() {
  let t = getMouseToCenterDistance();
  if (mouseInfosChanged()) {
    let a = $(window).width()
      , n = ($(window).height(),
    $(window).height() / 100 * 15)
      , i = a - 0
      , o = $(window).height() / 100 * 85 - n;
    mouse_x_in_viewport = mouseInfos.x - 0,
      mouse_y_in_viewport = mouseInfos.y - n,
      mouse_x_in_viewport_percent = mouse_x_in_viewport / (i / 100),
      mouse_y_in_viewport_percent = mouse_y_in_viewport / (o / 100),
    mouse_x_in_viewport_percent < 0 && (mouse_x_in_viewport_percent = 0),
    mouse_x_in_viewport_percent > 100 && (mouse_x_in_viewport_percent = 100),
    mouse_y_in_viewport_percent < 0 && (mouse_y_in_viewport_percent = 0),
    mouse_y_in_viewport_percent > 100 && (mouse_y_in_viewport_percent = 100);
    mouse_y_in_viewport_percent,
      mouse_y_in_viewport_percent,
      mouse_x_in_viewport_percent;
    var s = .2 * (50 - mouse_x_in_viewport_percent)
      , r = .2 * mouse_y_in_viewport_percent
      , l = .15 * mouse_x_in_viewport_percent
      , c = t.percentX;
    c < 0 && (c = 0);
    var d = .15 * (50 - mouse_x_in_viewport_percent)
      , p = .15 * (50 - mouse_y_in_viewport_percent);
    TweenMax.staggerTo($('.positioner:even...