如何制作跟随鼠标到极限的悬停动画效果？

Question

我正在尝试创建类似于此网页上使用的悬停效果：https://www.halo-lab.com/

它用于“我们的服务”部分中右上角的播放按钮（向下滚动一点即可看到它）。看起来它使用 JS 来更改内联样式值，但仅限于其周围的有限范围。内联样式最初将其设置为 0。

我不确定他们是如何实现这一运动的。我弄清楚了颜色变化的动画效果，但没有弄清楚它随鼠标移动的效果。我有一个带有相同箭头的 JS 小提琴，但没有运动部分：https://jsfiddle.net/84qpbxwn/

我确实注意到这个网站使用 GSAP。难道是使用他们的库的效果吗？

HTML：

<a href="#" class="button-play" style="will-change: transform; transform: translate3d(0rem, 0rem, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">
  <div class="button-play__bg"></div>
  <svg aria-hidden="true" role="img" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="100%" height="100%">
      <path d="M13.9 7.35a.7.7 0 0 1 0 1.213l-8.4 4.85a.7.7 0 0 1-1.05-.606v-9.7a.7.7 0 0 1 1.05-.606l8.4 4.85Z"></path>
    </svg>
</a>

CSS：

.button-play{
  background: #02021e;
  color: white;
  display: flex;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: color .4s;
  transform: translate(0);
  margin: 70px;
}

.button-play__bg{
  background-color: #3827c7;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transition: all .3s;
    position: absolute;
    inset: 0%;
    transform: scale(0);
}

.button-play svg{
  width: 1.75rem;
  height: 1.75rem;
  position: relative;
  z-index: 2;
}

.button-play:hover .button-play__bg{
  transform: scale(1)
}

Answer 1

效果不错！我尝试了以下方法，它似乎有效。我认为你必须调整一些东西才能使其更加顺畅。

<a href="#" class="button-play" id="playButton">
  <div class="button-play__bg"></div>
  <svg aria-hidden="true" role="img" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="100%" height="100%">
      <path d="M13.9 7.35a.7.7 0 0 1 0 1.213l-8.4 4.85a.7.7 0 0 1-1.05-.606v-9.7a.7.7 0 0 1 1.05-.606l8.4 4.85Z"></path>
    </svg>
</a>

我添加了一个事件监听器，当鼠标悬停在按钮上时跟踪鼠标移动。它计算鼠标相对于按钮中心的位置，并根据鼠标的移动稍微移动按钮。当鼠标离开时，它会重置按钮的位置。

const playButton = document.getElementById('playButton');

playButton.addEventListener('mouseenter', (e) => {
  playButton.classList.add('is-moving');
  
  document.addEventListener('mousemove', moveButton);
});

playButton.addEventListener('mouseleave', () => {
  playButton.classList.remove('is-moving');
  document.removeEventListener('mousemove', moveButton);
  playButton.style.transform = 'translate(0, 0)'; // Reset to original position
});

function moveButton(e) {
  const buttonRect = playButton.getBoundingClientRect();
  const mouseX = e.clientX;
  const mouseY = e.clientY;
  
  // Bereken de offset tussen muis en knop
  const offsetX = (mouseX - (buttonRect.left + buttonRect.width / 2)) / 10;
  const offsetY = (mouseY - (buttonRect.top + buttonRect.height / 2)) / 10;
  
  // Verplaats de knop op basis van de muisbeweging
  playButton.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
}

我还添加了一个 .is-moving 类，以确保按钮使用过渡平滑移动。

.button-play {
  background: #02021e;
  color: white;
  display: flex;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: color .4s;
  margin: 70px;
  transform: translate(0);
}

.button-play__bg {
  background-color: #3827c7;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  transition: all .3s;
  position: absolute;
  inset: 0%;
  transform: scale(0);
}

.button-play svg {
  width: 1.75rem;
  height: 1.75rem;
  position: relative;
  z-index: 2;
}

.button-play:hover .button-play__bg {
  transform: scale(1);
}

.is-moving {
  transition: transform 0.1s ease-out;
}

非常有趣的效果。感谢您尝试自己制作。