<div id="contaianer">
  <section id="wrapper">
    <div class="p1" data-revert="true" data-speed="0.01"></div>
    <div class="p2" data-speed="0.02"></div>
    <div class="p3" data-speed="0.01"></div>
    <div class="word" data-speed="0">
      explore
    </div>
  </section>
</div>
#contaianer {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: #000;
  overflow: hidden;
  font-family: 'Lato', sans-serif;
}

#wrapper {
  overflow: hidden;
  position: absolute;
  width: 1500px;
  height: 800px;
  z-index: 10;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#wrapper div {
  position: absolute;
  background-position: center center;
  background-size: cover;
}

.p1 {
  width: 1776px;
  height: 1183px;
  z-index: 6;
  background-image: url('//caraujo_pens.surge.sh/images/S6WCriT.jpg');
  left: -89px;
  top: -191px;
}

.p2 {
  width: 927px;
  height: 854px;
  z-index: 8;
  background-image: url('//caraujo_pens.surge.sh/images/aeffA4C.png');
  left: -83px;
  top: 169px;
}

.p3 {
  width: 1082px;
  height: 729px;
  z-index: 10;
  background-image: url('//caraujo_pens.surge.sh/images/QAyjA6B.png');
  left: 718px;
  top: 136px;
}

.word {
  font-weight: 900;
  color: #24395A;
  font-size: 17.5em;
  top: 30%;
  margin-top: -115px;
  width: 100%;
  text-align: center;
  z-index: 7;
  text-transform: uppercase;
}
$('html').mousemove(function(e){
    
    var wx = $(window).width();
    var wy = $(window).height();
    
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    
    var newx = x - wx/2;
    var newy = y - wy/2;
    
    $('span').text(newx + ", " + newy);
    
    $('#wrapper div').each(function(){
      var speed = $(this).attr('data-speed');
      if($(this).attr('data-revert')) speed *= -1;
      TweenMax.to($(this), 1, {x: (1 - newx*speed), y: (1 - newy*speed)});
      
    });
    
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js