如何实现类似Fubiz Studio的鼠标光标绑定小球效果？

Hey there! I’ve checked out the Fubiz Studio site you mentioned, and that cursor-bound ball effect is super sleek. Let’s break down how it works, then walk you through building it yourself.

Core Implementation Principles #

At its core, this effect relies on three key pieces:

• Mouse Position Tracking: We listen for the browser’s mousemove event to grab real-time X/Y coordinates of the cursor.
• Smooth Easing Animation: Instead of jumping the ball directly to the cursor, we use easing physics to make movement feel natural—no jerky, robotic jumps here.
• DOM Element Syncing: We update the position of a fixed-position ball element using JavaScript, tying its movement to the animated cursor coordinates.

Step-by-Step Build Guide #

1. Set Up Basic HTML #

Start by adding a simple ball element to your page—this is what we’ll animate:

<div class="cursor-ball"></div>

2. Style the Ball with CSS #

Make it a fixed, unobtrusive circle that sits above all other content:

.cursor-ball {
  position: fixed;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #2d2d2d; /* Swap with your portfolio's accent color */
  pointer-events: none; /* Critical: lets clicks pass through to other elements */
  z-index: 9999; /* Ensures it stays on top of all content */
  opacity: 0.7; /* Optional: add subtle transparency for polish */
}

3. Add the JavaScript Logic #

This is where the magic happens. We’ll track the cursor, calculate smooth movement, and update the ball’s position:

// Grab the ball element from the DOM
const ball = document.querySelector('.cursor-ball');

// Store current and target positions for smooth easing
let currentX = 0;
let currentY = 0;
let targetX = 0;
let targetY = 0;

// Easing factor: lower = slower, smoother movement (0.1–0.3 works best)
const ease = 0.2;

// Update target position when the mouse moves
window.addEventListener('mousemove', (e) => {
  // Offset by half the ball's size to center it on the cursor
  targetX = e.clientX - ball.offsetWidth / 2;
  targetY = e.clientY - ball.offsetHeight / 2;
});

// Animation loop synced to the browser's refresh rate
function animateBall() {
  // Calculate incremental movement using easing
  currentX += (targetX - currentX) * ease;
  currentY += (targetY - currentY) * ease;

  // Update the ball's position with transform (better performance than top/left)
  ball.style.transform = `translate(${currentX}px, ${currentY}px)`;

  // Keep the animation running
  requestAnimationFrame(animateBall);
}

// Start the animation loop
animateBall();

4. Extra Polish (Optional) #

To match Fubiz’s refined feel, try these tweaks:

• Hover Scale: Make the ball grow when hovering over links/buttons. Add mouseenter/mouseleave listeners to interactive elements and adjust the ball’s transform to include scale(1.5).
• Color Shifts: Swap the ball’s background color based on which section of the page the cursor is in.
• Multi-Ball Trail: Add 2–3 additional balls with slightly different easing factors, so they trail behind each other for a dynamic effect.

Performance Tips #

• No Debounce Needed: requestAnimationFrame syncs with the browser’s refresh rate, so it’s already optimized for smooth performance.
• Mobile Support: For touch devices, swap mousemove with touchmove and handle touch event coordinates (use e.touches[0].clientX instead of e.clientX).

内容的提问来源于stack exchange，提问作者Baudet