鼠标视差

Parallax with mouse

我正在尝试 '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)`
    })
}

我更正了一些小错误:

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

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

  • 我使用 <div class="img"></div> 而不是 <img>,使用 css 为不同的 div.img 元素着色
  • 我减小了 div.img 元素的大小,使效果在小 window
  • 中更明显
  • 我增加了 data-speed 的值,使效果更明显
  • 我让 htmlbody 元素填满了整个视口(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>