JSFiddle - React, Tailwind, and code Playground

HTML

<div class="layer1"></div>
<div class="layer2"></div>
<div class="layer3"></div>


<div class="layer1-shadow"></div>
<div class="layer2-shadow"></div>
<div class="layer3-shadow"></div>

CSS

html,body{height:100%;min-height:100%;overflow:hidden}
div{position:absolute;opacity:0.3}
.layer1{background:red;width:300px;height:150px;top:200px;left:300px}
.layer2{background:green;width:100px;height:200px;top:300px;left:900px}
.layer3{background:blue;width:50px;height:50px;top:550px;left:100px}
.layer1-shadow{background:#ccc;width:300px;height:150px;top:200px;left:300px}
.layer2-shadow{background:#ccc;width:100px;height:200px;top:300px;left:900px}
.layer3-shadow{background:#ccc;width:50px;height:50px;top:550px;left:100px}

JavaScript

$.fn.plaxmove = function(options){
    this.defaults = {
        ratio: {x: 0.2, y: 0.2},
        invert: {x: false, y: false},
        reversed: false
    }
    var settings = $.extend(!!'deep', this.defaults, options),
        layer = $(this),
        center ={
            x: $(window).width()/2-layer.width()/2,
            y: $(window).height()/2-layer.height()/2
        },
        xx0 ={x: layer.offset().top,
            y: layer.offset().left};
    console.log(settings )
    $(window).on('mousemove', function(ev){
        var xx ={},
            mousXX = {x: ev.pageX, y: ev.pageY};
        for(var i in center){
            var j = (settings.reversed ? {x:'y',y:'x'}:{x:'x',y:'y'})[i];
            xx[i] = xx0[i] + (2*settings.invert[i]-1)*(mousXX[j] - center[j])
                * settings.ratio[i];
            //console.log(xx)
        }
        $(layer).css({left: xx.x, top: xx.y})
    })
};

$(function(){
    $('.layer1').plaxmove()
    $('.layer2').plaxmove({ratio: {x: 0.2, y: 0.4},reversed:!0,invert:{x:false}})
    $('.layer3').plaxmove({ratio: {y: 0.6},invert:{y: !0}})
});