JSFiddle - React, Tailwind, and code Playground

by OwenMelbz

HTML

<div class="torch"></div>

CSS

.torch {
    
    background-image: url("http://owenmelbourne.com/crap/glow2.png");
    background-repeat: no-repeat;
    background-position: center center;
    
    position: absolute;
    top: 0;
    left:0;
    z-index: 999;
    
    width: 100%;
    height: 100%;
    
}
body {
    background-image: url("http://owenmelbourne.com/crap/8349864549_dcfedb8fbe_o.jpg");
    background-size: auto 100%;
    background-repeat: repeat-x;
    background-color: black;
    cursor: none;
    height: 100%;
    min-height: 100%;
}
html {
        height: 100%;
    min-height: 100%;
}

JavaScript

var movementStrength = 1000;

var height = movementStrength / $(window).outerHeight();
var width = movementStrength / $(window).outerHeight();

$(document).mousemove(function(e){

		  var pageX = e.pageX - ($(window).outerHeight() / 2);
		  var pageY = e.pageY - ($(window).outerHeight() / 2);
          //console.log(e.pageX, $(window).outerHeight(), $(window).outerHeight() / 2);
		  var newvalueX = width * pageX * -1;
		  var newvalueY = height * pageY * -1;
    
        if(newvalueY > -150 && newvalueY < 150){
            
        }
        else {
          newvalueY = parseFloat($('body').css('background-position').split(" ")[1]);   
        }
        
        $('body').css("background-position", newvalueX+"px "+newvalueY+"px");
        
         console.log(newvalueY, newvalueX);
		  
});