JSFiddle - React, Tailwind, and code Playground

by GolezTrol

HTML

<div>
    <span style="left:10%; top: 10%;">Content</span>
    <span style="right:10%; top: 10%;">Content</span>
    <span style="left:10%; bottom: 10%;">Content</span>
    <span style="right:10%; bottom: 10%;">Content</span>
    <span style="left:50%; top: 50%;">Content</span>
</div>

CSS

html, body {
    height: 100%;
    overflow: hidden;
}

div {
    background-color: lightgreen;
    position: relative;
    width: 150%;
    height: 150%;
}

span {
    background-color: white;
    position: absolute;
}

JavaScript

$(document).mousemove(function(event) {
  
  var $window = $(window);
  var $div = $('div'); // More precise selector would be nice.

  // get the size difference between the content to scroll and the window.    
  var dWidth = $div.width() - $window.width();
  var dHeight = $div.height() - $window.height();
    
  // get the relative position on the screen (0 to 1)
  var wFactor = event.pageX / $window.width();
  var hFactor = event.pageY / $window.height();
    
  // Apply that factor to the position of the div.
  $div.css('left', -dWidth * wFactor);
  $div.css('top', -dHeight * hFactor);
});