鼠标视差 - 编程之家

如何解决鼠标视差

当鼠标在页面上移动时，我正在尝试“转换”元素，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)`
    })
}

解决方法

我纠正了一些小错误：

错字data-speeed="2"更正为data-speed="2"
我更喜欢getBoundingClientRect()而不是window.innerWidth / window.innerHeight
受视差影响的项目使用 left、top、width、height 和负 margin-left 和 margin-top 居中 -这允许 transform.translate 属性相对于它们的中心平移它们
我将所有逻辑封装到一个不错的 applyParallax 函数中，以防您希望将其应用于多个 section 元素

我还必须进行一些更改才能使其与 stackoverflow 的代码段系统一起使用：

我使用了 <img> 而不是 <div class="img"></div>，使用 css 为不同的 div.img 元素分别着色
我减小了 div.img 元素的大小以使效果在小窗口中更加明显
我增加了 data-speed 的值以使效果更明显
我让 html 和 body 元素填充了整个视口（而 section 元素填充了整个 body 元素）

let applyParallax = section => {
  
  section.addEventListener('mousemove',e => {

    let { width,height } = section.getBoundingClientRect();
    let offX = e.pageX - (width * 0.5);
    let offY = e.pageY - (height * 0.5);

    for (let layer of document.querySelectorAll('.img')) {
      const speed = layer.getAttribute('data-speed')
      const x = (offX * speed) / 100;
      const y = (offY * speed) / 100;
      layer.style.transform = `translateX(${x}px) translateY(${y}px)`
    }

  });
  section.addEventListener('mouseleave',e => {

    for (let layer of document.querySelectorAll('.img')) {
      layer.style.transform = `translateX(0px) translateY(0px)`
    }

  });
  
};
applyParallax(document.querySelector('section'));

html,body { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
section {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}
section > .img {
  position: absolute;
  left: 50%; top: 50%;
  width: 120px; height: 120px;
  margin-left: -60px; margin-top: -60px;
}
section > .img.r { background-color: rgba(200,0.5); }
section > .img.g { background-color: rgba(0,200,0.4); }
section > .img.b { background-color: rgba(0,0.3); }

<section class="container bot-container-img">
  <div class="img r" data-speed="22"></div>
  <div class="img g" data-speed="-5"></div>
  <div class="img b" data-speed="32"></div>
</section>