鼠标响应式视差效果Z值失效问题求助

核心问题分析 #

你的parallax函数动态Z值失效，根源在三个关键错误：

• 参数引用错误：update函数声明接收cursorPosition参数，但内部误用未定义的e.clientX，直接导致计算报错
• 元素位置获取不准确：依赖getComputedStyle(el).left获取元素位置，该值是CSS声明的left属性，而非元素在视口的真实位置（你用了transform: translate(-50%, -50%)平移元素，CSS left无法反映实际位置）
• 方向判断逻辑偏差：用元素左边缘和窗口中心对比判断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;
  
        // 获取元素在视口的真实位置信息
        const rect = el.getBoundingClientRect();
        // 计算元素中心的X坐标
        const elementCenterX = rect.left + rect.width / 2;
        // 判断光标与元素中心的相对位置，生成方向系数
        let isInLeft = cursorPosition < elementCenterX ? 1 : -1;
        // 计算光标到元素中心的水平距离，结合方向系数生成Z值
        let zValue = Math.abs(cursorPosition - elementCenterX) * 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);
});

关键修复点说明 #

• 替换位置获取方式：用el.getBoundingClientRect()获取元素在视口的准确坐标（包括left、width等），以此计算元素中心位置，确保位置判断准确
• 修正方向判断逻辑：对比光标X坐标与元素中心X坐标生成isInLeft系数，保证方向切换符合“光标在元素左侧/右侧时Z值反向”的预期
• 修复参数引用错误：将e.clientX改为函数传入的cursorPosition，消除未定义变量报错
• 优化Z值计算：用Math.abs()确保距离为正数，再乘以方向系数，让Z值随光标与元素的距离动态变化，实现真实的深度视差效果

额外优化建议 #

• 可以给.parallax元素添加data-depth自定义属性，用来单独控制每个元素的Z轴移动强度，打造分层视差效果
• 若需要更流畅的动画，可将transition的贝塞尔曲线参数调整得更柔和，或改用requestAnimationFrame替代鼠标事件直接触发更新，提升性能

内容的提问来源于stack exchange，提问作者Ludwig