鼠标视差

Question

我正在尝试“转换”元素，当鼠标在页面上移动时，img 在这里。我已经集成了一个香草代码来创建这种效果，并认为我理解它，但似乎我错了。代码 sn-p 中的元素是橙色方块（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)`
    })
}

Answer 1

我纠正了一些小错误：

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

我还必须进行一些更改才能使其与 stackoverflow 的 sn-p 系统一起使用：

• 我使用 <div class="img"></div> 而不是 <img>，用 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, 0, 0.5); }
section > .img.g { background-color: rgba(0, 200, 0, 0.4); }
section > .img.b { background-color: rgba(0, 0, 200, 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>