JSFiddle - React, Tailwind, and code Playground

by hmdadou

HTML

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

CSS

@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;

  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;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}

.wrap {
  height: 100%;
  position: relative;
  overflow: hidden;
}
.wrap .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;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

JavaScript

$( document ).ready(function() {
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();
});