JSFiddle - React, Tailwind, and code Playground

by kougiland

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");
});