鼠标视差

Question

我正在尝试 'transform' 个元素，当鼠标在页面上移动时在此处 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)`
    })
}

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 元素

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

我使用 <div class="img"></div> 而不是 <img>，使用 css 为不同的 div.img 元素着色
我减小了 div.img 元素的大小，使效果在小 window
我增加了 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>

鼠标视差

Parallax with mouse

javascript

html

css

parallax

parallax.js