更新鼠标移动时的视差以做出响应

如何解决更新鼠标移动时的视差以做出响应

我想在没有任何插件的mousemove上创建可响应的视差效果。因此，其想法是在mousemove事件中使英雄部分中的某些元素稍微移动。我已经根据我在此Codepen上找到的代码创建了这种效果 https://codepen.io/vahidseo/pen/qahfL

   window.onload = function () {

   var parallaxBox = document.getElementById ( 'Box' );
   var c1left = document.getElementById ( 'l1' ).offsetLeft,c1top = document.getElementById ( 'l1' ).offsetTop,c2left = document.getElementById ( 'l2' ).offsetLeft,c2top = document.getElementById ( 'l2' ).offsetTop,c3left = document.getElementById ( 'l3' ).offsetLeft,c3top = document.getElementById ( 'l3' ).offsetTop,c4left = document.getElementById ( 'l4' ).offsetLeft,c4top = document.getElementById ( 'l4' ).offsetTop;

    parallaxBox.onmousemove = function ( event ) {
       event = event || window.event;
       var x = event.clientX - parallaxBox.offsetLeft,y = event.clientY - parallaxBox.offsetTop;
    
       mouseParallax ( 'l1',c1left,c1top,x,y,5 );
       mouseParallax ( 'l2',c2left,c2top,15 );
       mouseParallax ( 'l3',c3left,c3top,30 );
       mouseParallax ( 'l4',c4left,c4top,65 );
    }

    }

 function mouseParallax ( id,left,top,mouseX,mouseY,speed ) {
    var obj = document.getElementById ( id );
    var parentObj = obj.parentNode,containerWidth = parseInt( parentObj.offsetWidth ),containerHeight = parseInt( parentObj.offsetHeight );
        obj.style.left = left - ( ( ( mouseX - ( parseInt( obj.offsetWidth ) / 2 + left ) ) / containerWidth ) * speed ) + 'px';
        obj.style.top = top - ( ( ( mouseY - ( parseInt( obj.offsetHeight ) / 2 + top ) ) / containerHeight ) * speed ) + 'px';}

我进行了一些更改，以使其适合我的需求并适用于指定的任何数量的元素。

现在的问题是我无法使其响应。我尝试实现窗口调整大小事件，但无法使其与其余代码一起使用。有人可以帮我吗？

    window.onload = () => {
    let parallaxBox = document.getElementById ( 'Box' );
    let layers = document.querySelectorAll('.layer');
    
    window.addEventListener('resize',startParallax);

    function startParallax() {
        layers.forEach((layer) => {
            let oL,oT,s;
            oL = layer.offsetLeft;
            oT = layer.offsetTop;
            s = parseInt(layer.dataset.speed);
            parallaxBox.addEventListener('mousemove',( event ) => {
                event = event || window.event;
                let x = event.clientX - parallaxBox.offsetLeft,y = event.clientY - parallaxBox.offsetTop;
                mouseParallax ( layer,oL,s );
            })
        })
    }
    startParallax()
}

function mouseParallax ( obj,speed ) {
    let parentObj = obj.parentNode,containerHeight = parseInt( parentObj.offsetHeight );

    obj.style.left = left - ( ( ( mouseX - ( parseInt( obj.offsetWidth ) / 2 + left ) ) / containerWidth ) * speed ) + 'px';
    obj.style.top = top - ( ( ( mouseY - ( parseInt( obj.offsetHeight ) / 2 + top ) ) / containerHeight ) * speed ) + 'px';
}

这是我的榜样 https://jsfiddle.net/janchey/ndy7zjsL/2/