JSFiddle - React, Tailwind, and code Playground

by Brett Miley

HTML

<div class="wrapwrap">
<div class="wrap">

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

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

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

</div> </div>

CSS

.wrapwrap{
  height: 2000px;
 } 
.wrap{
  height:1000px;
  overflow:hidden;
  position: relative;
}

.effect{
    position:absolute;
    top:-999px;
    left:-999px;
    right:-999px;
    bottom:-999px;
    margin: auto;
}

#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 = 100;
var strength2 = 1000;
var strength3 = 2000;
$("window").scroll(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 * 0)+"px "+(strength1  / $(window).height() * pageY * -1)+"px");
    $('#middleground').css("background-position", (strength2 / $(window).width() * pageX * 0)+"px "+(strength2  / $(window).height() * pageY * -1)+"px");
    $('#foreground').css("background-position", (strength3 / $(window).width() * pageX * 0)+"px "+(strength3  / $(window).height() * pageY * -1)+"px");
});