使用 GSAP 在悬停时显示光标图像 - 中心问题

Question

我正在使用 GSAP 在悬停时显示图像，该图像在四处移动时跟随光标，一切正常，但我无法将图像显示到 'center center' 光标，我错过了什么？

const items = document.querySelectorAll('.container')

items.forEach((el) => {
  const image = el.querySelector('img')
  
  el.addEventListener('mouseenter', (e) => {
    gsap.to(image, { autoAlpha: 1 })
  })
  
   el.addEventListener('mouseleave', (e) => {
    gsap.to(image, { autoAlpha: 0 })
  })
  
  el.addEventListener('mousemove', (e) => {
    gsap.set(image, { x: e.offsetX })
  })
})

.container {
  position:relative;
  background:#ff0000;
  width:100%;
  height:60px;
}

.container img {
  position: absolute;
  width: 200px;
  height: 200px;
  object-fit: cover;
  transform: translateX(-50%) translateY(-50%);
  top: 50%;
  left: 50%;
  z-index: -10;
  opacity: 0;
  visibily: hidden;
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.1/gsap.min.js"></script>

<div class="container">
  <img src="https://source.unsplash.com/random">
</div>

Answer 1

您需要从 .container img 中删除 left: 50%;。

const items = document.querySelectorAll('.container')

items.forEach((el) => {
  const image = el.querySelector('img')
  
  el.addEventListener('mouseenter', (e) => {
    gsap.to(image, { autoAlpha: 1 })
  })
  
   el.addEventListener('mouseleave', (e) => {
    gsap.to(image, { autoAlpha: 0 })
  })
  
  el.addEventListener('mousemove', (e) => {
    gsap.set(image, { x: e.offsetX })
  })
})

.container {
  position:relative;
  background:#ff0000;
  width:100%;
  height:60px;
}

.container img {
  position: absolute;
  width: 200px;
  height: 200px;
  object-fit: cover;
  transform: translateX(-50%) translateY(-50%);
  top: 50%;
  z-index: -10;
  opacity: 0;
  visibily: hidden;
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.1/gsap.min.js"></script>

<div class="container">
  <img src="https://source.unsplash.com/random">
</div>

使用 GSAP 在悬停时显示光标图像 - 中心问题

Show cursor image on hover with GSAP - center issue

javascript

css

gsap