Css + Javascript 视差效果 Z 值不起作用

Question

我正在制作一个网站，我想集成一个响应鼠标移动的视差效果。一切似乎都可以接受 z 值，这增加了它的深度。 我有 2 个不同的功能，因为我希望其中之一进入不同的方向。

（问题主要在于视差功能，而不是间隔器） 因此，每当我将

zValue

设置为固定值时，一切似乎都工作正常，但这也没有给出我想要的效果。这个问题与

clientX

值有关，但我不明白为什么它没有给我光标距元素的距离。 它应该返回元素和光标之间的距离，然后乘以 y

isInLeft

，如果它位于屏幕的另一侧，这将使其改变方向。

这是 JavaScript：

const parallax_el = document.querySelectorAll(".parallax");
const spacer_el = document.querySelectorAll(".spacer");

let xValue = 0,
  yValue = 0;

let rotateDegree = 0;

function update(cursorPosition) {
    parallax_el.forEach(el => {
        let speedx = el.dataset.speedx;
        let speedy = el.dataset.speedy;
        let speedz = el.dataset.speedz;
        let rotateSpeed = el.dataset.rotation;
  
        let isInLeft = 
          parseFloat(getComputedStyle(el).left) < window.innerWidth / 2 ? 1 : -1;
        let zValue =
          (e.clientX - parseFloat(getComputedStyle(el).left)) * isInLeft * 0.1;
  
        el.style.transform = `perspective(2300px) translateZ(${
           zValue * speedz
        }px) rotateY(${rotateDegree * rotateSpeed}deg) translateX(calc(-50% + ${
           -xValue * speedx
        }px)) translateY(calc(-50% + ${-yValue * speedy}px))`;
    });
}

function updateSpacer(cursorPosition) {
    spacer_el.forEach(el => {
        let speedx = el.dataset.speedx;
        let speedy = el.dataset.speedy;
        let speedz = el.dataset.speedz;
        let rotateSpeed = el.dataset.rotation;

        let zValueSpacer = 100

        el.style.transform = `perspective(2300px) translateZ(${
            zValueSpacer * speedz
        }px) rotateY(${rotateDegree * rotateSpeed}deg) translateX(calc(-50% + ${
            xValue * speedx
        }px)) translateY(calc(-50% + ${yValue * speedy}px))`;
    });
}

update(0);
updateSpacer(0);

window.addEventListener("mousemove", (e) => {
    xValue = e.clientX - window.innerWidth / 2;
    yValue = e.clientY - window.innerHeight / 2;

    rotateDegree = (xValue / (window.innerWidth / 2)) * 20;

    update(e.clientX);
    updateSpacer(e.clientX);
});

我的 html 和 css 相当长，所以我只会在这里放一些可能会弄乱它的 css ：

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 20px;
    font-family: 'Roboto';
}

body{
    background: var(--primary-color);
    overflow-x: hidden;
}

main{
    padding-top: 6rem;
    margin-right: 1rem;
    margin-left: 1rem;
    margin-bottom: 2rem;
    position: relative;
    color: var(--secondary-color);
}

.parallax{
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: 0.45s cubic-bezier(.2,.49,.32,.99);
}

.para-space{
    height: 85rem;
    background-color: var(--tertiary-color); /*TEMP*/
}

.spacer{
    aspect-ratio: 1000/300;
    width: 130%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    pointer-events: none;
    top:calc(50% - 350px);
    left: calc(50% + 10px);
    transform: translate(-50%, -50%);
    transition: 0.45s cubic-bezier(.2,.49,.32,.99);
    z-index: 137;
}

.wave-1{
    background-image: url('media/wave-1.svg');
    margin-top: 1rem;
}

.wave-2{
    background-image: url('media/wave-2.svg');
    margin-top: 65rem;
}

.main-text{
    position: absolute;
    text-align: center;
    top: calc(50% + 0px);
    left: calc(50% + 0px);
}

.main-text h1{
    font-size: 5rem;
    font-family: 'Roboto';
}

如果没有 html，大部分内容就没有意义，但我尝试使用图像而不是其他元素。 （.svg 文件仅受 .spacer 函数影响，因此它们的 zValue 固定为 100。）

Answer 1

发现问题，我用

cursorPosition

更新了函数，但忘记用它替换

e.clientX

。我忘记了

e.clientX

不能在

Eventlistener

之外使用

已修复