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

(function($){
    $.fn.plaxmove = function(options) {

        this.defaults = {
            ratioH: 0.2,
            ratioV: 0.2,
            reversed: false
        }

        var settings = $.extend({},this.defaults,options),
            layer = $(this),
            center = {
                x: $('html').width()/2,
                y: $('html').height()/2
            },
            y0 = layer.offset().top,
            x0 = layer.offset().left;
        
        //Инвариант процесса: при установке указателя мыши в точку center все элементы возвращаются на место
        var eqH = function(e) {
            return x0 + (e.pageX - center.x)*settings.ratioH
        }

        var eqW = function(e) {
            return y0 + (e.pageY - center.y)*settings.ratioV
        }        

        if(settings.reversed) {
                var t = eqH; eqH = eqW; eqW = t;
        }
            
        //Данные свойства css иногда помогают указать начальное расположение элемента, но при движении мыши они будут только мешать
        layer.css('margin-left', '0px')
        layer.css('margin-top', '0px')
        layer.css({top:y0, left:x0})
        
        $('html').on('mousemove', function(e) {
                x = eqH(e)
                y = eqW(e)
                layer.css({top:y,left:x})
        })

    };
})(jQuery);

$(function(){
    $('.layer1').plaxmove()
    $('.layer2').plaxmove({ratioW: 0.4,reversed:true})
    $('.layer3').plaxmove({ratioH: -0.6})
});