Hiệu ứng Magnetic Hover: Nút và chữ “hút” con trỏ chuột bằng JavaScript thuần

Trong bài viết này, chúng ta sẽ xây dựng hiệu ứng Magnetic Hover chỉ với JavaScript thuần và CSS transform. Không canvas, không thư viện ngoài, dễ kiểm soát, dễ mở rộng và thân thiện với hiệu năng.

Demo hiệu ứng

HTML

HTML cho hiệu ứng Magnetic Hover rất đơn giản. Chúng ta chỉ cần một phần tử có thể tương tác, thường là button hoặc link. Phần tử này sẽ được JavaScript theo dõi vị trí chuột và áp dụng transform tương ứng.

<button class="magnetic-btn">Hover me</button>

CSS: Chuẩn bị hiệu ứng chuyển động

CSS chịu trách nhiệm hiển thị giao diện và tạo cảm giác chuyển động mượt. Thuộc tính transition giúp phần tử di chuyển nhẹ nhàng thay vì giật cục, trong khi will-change hỗ trợ trình duyệt tối ưu hiệu năng render.

.magnetic-btn {
  padding: 16px 40px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: #1f1f1f;
  color: #ffffff;

  transition: transform 0.25s ease-out;
  will-change: transform;
}

JavaScript: Tạo lực hút theo con trỏ chuột

JavaScript sẽ theo dõi vị trí con trỏ chuột so với tâm của phần tử. Khi chuột tiến lại gần, chúng ta tính toán khoảng cách và dịch chuyển phần tử theo hướng con trỏ, tạo cảm giác “lực hút”. Khi chuột rời đi, phần tử quay trở lại vị trí ban đầu.

const magnetic = document.querySelector('.magnetic-btn');

document.addEventListener('mousemove', (e) => {
  const rect = magnetic.getBoundingClientRect();
  const centerX = rect.left + rect.width / 2;
  const centerY = rect.top + rect.height / 2;

  const deltaX = e.clientX - centerX;
  const deltaY = e.clientY - centerY;

  const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
  const maxDistance = 120;

  if (distance < maxDistance) {
    magnetic.style.transform = `translate(${deltaX * 0.25}px, ${deltaY * 0.25}px)`;
  } else {
    magnetic.style.transform = 'translate(0, 0)';
  }
});

Vì sao hiệu ứng Magnetic Hover trông “xịn”?

• Chuyển động dựa trên vị trí chuột nên tạo cảm giác phản hồi tức thì
• Không cần animation phức tạp hay keyframes
• Hoạt động tốt với button, link, icon hoặc chữ
• Dễ kết hợp với hover effect, shadow hoặc scale

Tùy chỉnh và mở rộng

Bạn có thể tinh chỉnh hiệu ứng Magnetic Hover rất linh hoạt:

• Thay đổi hệ số 0.25 để tăng hoặc giảm lực hút
• Giảm maxDistance để hiệu ứng chỉ kích hoạt khi chuột rất gần
• Kết hợp scale() hoặc box-shadow khi hover
• Dùng requestAnimationFrame để đạt chuyển động mượt nhất

Kết luận

Magnetic Hover là một hiệu ứng nhỏ nhưng mang lại giá trị UX lớn. Nó giúp các yếu tố tương tác trở nên sống động, cao cấp và chuyên nghiệp hơn mà không ảnh hưởng đến hiệu năng. Với một chút JavaScript và CSS transform, bạn hoàn toàn có thể áp dụng hiệu ứng này cho bất kỳ website hiện đại nào.