JSFiddle - React, Tailwind, and code Playground

by nilesh026

HTML

<div id="background"></div>
<div id="middleground"></div>
<div id="foreground"></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;
$("html").mousemove(function (e) {
    var pageX = e.pageX - ($(window).width() / 2);
    var pageY = e.pageY - ($(window).height() / 2);
    var newvalueX = 1 * pageX * -1;
    var newvalueY = 1 * pageY * -1;
    $('#background').css("background-position", (strength1 / $(window).width() * pageX * -1) + "px " + (strength1 / $(window).height() * pageY * -1) + "px");
    $('#middleground').css("background-position", (strength2 / $(window).width() * pageX * -1) + "px " + (strength2 / $(window).height() * pageY * -1) + "px");
    $('#foreground').css("background-position", (strength3 / $(window).width() * pageX * -1) + "px " + (strength3 / $(window).height() * pageY * -1) + "px");
});