Move background perspective on mouse move effect

index.html

<div class="wrap">
  <div class="bg"></div>
  <h1>Take a look around</h1>
</div>

<!-- Effect inspired by https://codepen.io/supah/pen/RrzREx -->

move-background-perspective-on-mouse-move-effect.markdown

Move background perspective on mouse move effect

A Pen by Kriszta on CodePen.

License.

script.js

var lFollowX = 0,
    lFollowY = 0,
    x = 0,
    y = 0,
    friction = 1 / 30;

function moveBackground() {
  x += (lFollowX - x) * friction;
  y += (lFollowY - y) * friction;
  
  translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';

  $('.bg').css({
    '-webit-transform': translate,
    '-moz-transform': translate,
    'transform': translate
  });

  window.requestAnimationFrame(moveBackground);
}

$(window).on('mousemove click', function(e) {

  var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
  var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));
  lFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
  lFollowY = (10 * lMouseY) / 100;

});

moveBackground();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import url(https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700);

*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  position: relative;
  padding: 20px;
  
  font-family: 'Libre Baskerville', serif;
}

h1 {
  margin: 0;
  padding: 0;
  
  position: absolute;
  top: 50%;
  left: 50%;
  
  color: white;
  font-size: 7vmin;
  text-align: center;
  text-transform: uppercase;

  transform: translate3d(-50%, -50%, 0);
}

.wrap {
  height: 100%;  
  position: relative;
  overflow: hidden;

  img, .bg {
    
    
  }
  
  .bg {
    width: 100%;
    height: 100%;
    
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/167792/mountains_copy.jpg') no-repeat center center;
    background-size: cover;

    transform: scale(1.1);
  }
}