鼠标视差

问题描述

当鼠标在页面上移动时，我正在尝试“转换”元素，img 在这里。我已经集成了一个香草代码来创建这种效果，并认为我理解了它，但似乎我错了。代码片段中的元素是橙色方块 (3.png)，但我想将这种效果也应用到后面的人类图片 (2.png) 上，但不知道怎么做。（这是完整的代码，因为除了我的整个架构之外，我不知道出了什么问题：https://github.com/KPq66dw8L/b-code-fiverr）

<section class="container bot-container-img">
<img class="layer closeUp" src="images/1.png" data-speeed="2" alt="">
<img class="layer ellipse2" src="images/2.png" data-speeed="-5" alt="">
<img class="layer" src="images/images/3.png" data-speed="2" alt=""> 
</section>

CSS：

.bot-container-img {
    grid-row-start: 3;
    grid-column-start: 1;
    grid-column-end: 3;
    width: 100%;
    height: 100%;
}
section {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}
section img {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

JS：

document.addEventListener("mousemove",parallax);

function parallax(e){
    this.querySelectorAll('.layer').forEach(layer => {
        const speed = layer.getAttribute('data-speed')

        const x = (window.innerWidth - e.pageX*speed)/100
        const y = (window.innerHeight - e.pageY*speed)/100

        layer.style.transform = `translateX(${x}px) translateY(${y}px)`
    })
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript parallax parallax.js