JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="noob-horizons london">

</div>

CSS

body{
  margin:0px;
  height:100%;
}
.noob-horizons{
  position:fixed;
  left:0px;
  top:0px;
  right:0px;
  bottom:0px;
  height:100%
}
.noob-horizons.london{
  background-color:#000;
  background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Sydney_Harbour_Bridge_night.jpg/2560px-Sydney_Harbour_Bridge_night.jpg);
}

JavaScript

var last_mouse_x = 0;
var last_mouse_y = 0;

var noobhorizons;

$(document).ready(function(){

	noobhorizons = $('.noob-horizons');
  
  horizonwidth = noobhorizons.width();
	horizonheight = noobhorizons.height();

	$('.noob-horizons').mousemove(function(e){
  
  	var posX = e.clientX;
    var posY = e.clientY;
    
    // get x % based on widget of container
    
    var percentage_x = (posX/horizonwidth)*100;
    var percentage_y = (posY/horizonheight)*100;
    
    noobhorizons.css('background-position',percentage_x + '% ' + (percentage_y*-1) +'%');
  
  });

});