parallax mouse move

by mrjordy

HTML

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" />

<div class=container>
  <div class="parallax">
    <div class="floor moveHalf">
      <div class="floorStripe"></div>
      <div class="marbleL"></div>
      <div class="marbleR"></div>
    </div>
    <div class="sideBack">
      <div class="leftBackActFlare"></div>
      <div class="leftBackActSquareOuter">
        <div class="leftBackActSquareInner"></div>
      </div>
      <div class="leftBackCrown"></div>
      <div class="leftBackBase"></div>
      <div class="rightBackActFlare"></div>
      <div class="rightBackActSquareOuter">
        <div class="rightBackActSquareInner"></div>
      </div>
      <div class="rightBackCrown"></div>
      <div class="rightBackBase"></div>
    </div>
    <div class="midBack moveHalf">
      <div class="midBackActualWall">
        <div class="midBackActSquareOuter">
          <div class="midBackActSquareInner">
            <div class="menuContainer">
              <nav class="Menu">
                <div class="gallery foursq foursq1">gallery</div>
                <div class="services foursq foursq2">services</div>
                <div class="about foursq foursq3">about</div>
                <div class="contact foursq foursq4">contact</div>
              </nav>
            </div>
            
          </div>
        </div>
      </div>
      <div class="midBackCrown">
        <div class="midBackCrownLeft"></div>
        <div class="midBackCrownMiddle"></div>
        <div class="midBackCrownMiddleTrans"></div>
        <div class="midBackCrownRight"></div>
      </div>
      <div class="midBackBase">
        <div class="midBackBaseLeft"></div>
        <div class="midBackBaseMiddleLeft"></div>
        <div class="midBackBaseMiddleRight"></div>
        <div class="midBackBaseRight"></div>
      </div>
    </div>
    <div class="rightSconce"></div>
    <div class="leftSconce"></div>
    <div class="fireplace moveHalf">
      <div...

CSS

.parallax {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  left: 0;
  font-family: Raleway, sans-serif;
}

body {
  margin: 0 !important;
}

.tempimg>img {
  width: 100vw;
}

.floor {
  background: linear-gradient(to left, #a59b91 0%, #c8c4c1 50%, white 100%);
  bottom: 0;
  height: 30%;
  width: 100%;
  display: block;
  position: absolute;
  opacity: 1;
}

.floorStripe {
  background: url(http://falconwood.us/wolfy/jordanjunk/floorStripe.svg);
  background-position-y: bottom;
  background-size: 100% 100%;
  width: 100%;
  height: 100px;
  bottom: -9%;
  background-repeat: no-repeat;
  position: absolute;
}

.marbleL {
  background: url(http://falconwood.us/wolfy/jordanjunk/marble.png);
  bottom: 0;
  height: calc(100% - 20px);
  width: 50%;
  display: block;
  position: absolute;
  opacity: 1;
}

.marbleR {
  background: url(http://falconwood.us/wolfy/jordanjunk/marble.png);
  bottom: 0;
  height: 100%;
  width: 50%;
  display: block;
  position: absolute;
  opacity: 1;
  right: 0;
  transform: scaleX(-1);
}

/* ------------------------------------ */
.sideBack {
  background: linear-gradient(to left, #978c8a 4%, #7e716b 26%, #c2bdc1 76%, #9a9496 100%);
  margin-top: 1%;
  height: 82%;
  width: 100%;
  display: block;
  position: absolute;
  opacity: 1;
  overflow: hidden;
}

.leftBackActFlare {
  position: absolute;
  display: block;
  width: 35%;
  height: 110%;
  margin-left: 5%;
  background-image: radial-gradient(rgba(255, 255, 255, 0.3), transparent 60%);
  border-radius: 100%;
}

.leftBackActSquareOuter {
  box-shadow: inset 0 0 0px 30px rgba(148, 140, 142, 0.3);
  width: 800px;
  height: calc(100% - 190px);
  margin-left: calc(20% - 750px);
  margin-top: 110px;
  display: block;
  position: absolute;
}

.leftBackActSquareInner {
  box-shadow: inset 0 0 0px 10px rgba(148, 140, 142, 0.3);
  width: calc(100% - 80px);
  height: calc(100% - 80px);
  margin: 40px;
  display: block;
  position: absolute;
}

.leftBackCrown {
 ...

JavaScript

var currentX = '';
var currentY = '';
var movementConstant = 0.004;
var movementConstantHalf = 0.003;
$(document).mousemove(function(e) {
  if (currentX == '') currentX = e.pageX;
  var xdiff = e.pageX - currentX;
  currentX = e.pageX;
  if (currentY == '') currentY = e.pageY;
  var ydiff = e.pageY - currentY;
  currentY = e.pageY;
  $('.parallax .move').each(function(i, el) {
    var movement = (i + 1) * (xdiff * movementConstant);
    var movementy = (i + 1) * (ydiff * movementConstant);
    var newX = $(el).position().left + movement;
    var newY = $(el).position().top + movementy;
    $(el).css('left', newX + 'px');
    $(el).css('top', newY + 'px');
  });
  $('.parallax .moveHalf').each(function(i, el) {
    var movement = (i + 1) * (xdiff * movementConstantHalf);

    var newX = $(el).position().left + movement;

    $(el).css('left', newX + 'px');

  });
});

var timeout;
document.onmousemove = function() {
  clearTimeout(timeout);
  timeout = setTimeout(function() {
    $(".move, .moveHalf").css("top", "");
    $(".move, .moveHalf").css("left", "");
  }, 10000);
}
$(window).resize(function() {
  $(".move, .moveHalf").css("top", "");
  $(".move, .moveHalf").css("left", "");
});



$( ".gallery" ).hover(
  function() {
    $('.Menu').addClass( "gallery" );
    $(".Menu").css({'top': '0', 'left': '0', 'bottom': '', 'right': ''});
  }, function() {$('.Menu').removeClass( "gallery" );}
);
$( ".services" ).hover(
  function() {
    $('.Menu').addClass( "services" );
    $(".Menu").css({'top': '0', 'left': '', 'bottom': '', 'right': '0'});
  }, function() {$('.Menu').removeClass( "services" );}
);
$( ".about" ).hover(
  function() {
    $('.Menu').addClass( "about" );
    $(".Menu").css({'top': '', 'left': '0', 'bottom': '0', 'right': ''});
  }, function() {$('.Menu').removeClass( "about" );}
);
$( ".contact" ).hover(
  function() {
    $('.Menu').addClass( "contact" );
    $(".Menu").css({'top': '', 'left': '', 'bottom': '0', 'right': '0'});
  }, function()...