JSFiddle - React, Tailwind, and code Playground

by Chris Ames

HTML

<div onmousemove="update(event)">

<div id="background">
</div>

<div id="middleground">
</div>

<div id="foreground">
</div>

</div>

CSS

div{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

#background{
    z-index:1;
    background:url('http://placehold.it/100x100&text=Background');
}
#middleground{
    z-index:2;
    background:url('http://placehold.it/250x250&text=Middleground');
    opacity:.5;
}
#foreground{
    z-index:3;
    background:url('http://placehold.it/350x350&text=Foreground');
    opacity:.25;
}

JavaScript

/*
function AnimateMe(){
    $("#background").css("background-position", "-=2");
    $("#middleground").css("background-position", "-=4");
    $("#foreground").css("background-position", "-=8");    
}
    
setInterval(AnimateMe, 1000/60);
*/
    
var strength1 = 50;
var strength2 = 100;
var strength3 = 200;

var background = document.getElementById('background');
var middleground = document.getElementById('middleground');
var foreground = document.getElementById('foreground');

function update(e){
    var pageX = e.clientX - (window.innerWidth / 2);
    var pageY = e.clientY - (window.innerHeight / 2);
    background.style.backgroundPosition = (strength1 / window.innerWidth * pageX * -1)+"px "+(strength1  / window.innerHeight * pageY * -1)+"px";
    middleground.style.backgroundPosition = (strength2 / window.innerWidth * pageX * -1)+"px "+(strength2  / window.innerHeight * pageY * -1)+"px";
    foreground.style.backgroundPosition = (strength3 / window.innerWidth * pageX * -1)+"px "+(strength3  / window.innerHeight * pageY * -1)+"px";
};