寫一個滑鼠跟隨的特效

王铁柱6發表於2024-12-08
特效
// 獲取滑鼠跟隨的元素
const cursorFollower = document.createElement('div');
cursorFollower.id = 'cursor-follower';
cursorFollower.style.position = 'fixed';
cursorFollower.style.pointerEvents = 'none'; // 避免干擾其他元素的點選事件
cursorFollower.style.width = '20px';
cursorFollower.style.height = '20px';
cursorFollower.style.borderRadius = '50%';
cursorFollower.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // 設定顏色和透明度
cursorFollower.style.transform = 'translate(-50%, -50%)'; // 使中心點作為定位基準
document.body.appendChild(cursorFollower);


// 新增滑鼠移動事件監聽器
document.addEventListener('mousemove', (e) => {
  const x = e.clientX;
  const y = e.clientY;

  // 更新跟隨元素的位置
  cursorFollower.style.left = x + 'px';
  cursorFollower.style.top = y + 'px';
});


// 可選：新增一些額外的樣式和動畫效果

// 1. 新增過渡效果，使移動更平滑
cursorFollower.style.transition = 'all 0.1s ease';


// 2.  根據滑鼠速度改變大小
document.addEventListener('mousemove', (e) => {
    let speed = Math.sqrt(e.movementX ** 2 + e.movementY ** 2);
    let size = Math.max(10, 30 - speed / 3); // 限制大小範圍
    cursorFollower.style.width = size + 'px';
    cursorFollower.style.height = size + 'px';
});


// 3. 滑鼠懸停在特定元素上時改變樣式
const elementsToHighlight = document.querySelectorAll('a, button'); // 選擇要高亮的元素

elementsToHighlight.forEach(element => {
  element.addEventListener('mouseover', () => {
    cursorFollower.style.backgroundColor = 'rgba(255, 0, 0, 0.5)'; // 例如，改為紅色
    cursorFollower.style.transform = 'translate(-50%, -50%) scale(1.5)'; // 放大
  });

  element.addEventListener('mouseout', () => {
    cursorFollower.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // 恢復預設顏色
    cursorFollower.style.transform = 'translate(-50%, -50%) scale(1)'; // 恢復大小
  });
});

使用方法：

  1. 將這段程式碼複製到你的 HTML 檔案的 <head> 或 <body> 部分（最好放在 <body> 的末尾）。
  2. 根據需要修改樣式，例如 backgroundColor、width、height 等。
  3. 對於更高階的動畫效果，可以考慮使用 CSS 動畫或 JavaScript 動畫庫，例如 GSAP。

程式碼解釋：

  • 建立跟隨元素: 建立了一個 div 元素，並設定其樣式，使其成為一個圓形。 pointerEvents: 'none' 很重要，它可以防止跟隨元素阻擋滑鼠點選其他元素。
  • 新增滑鼠移動事件監聽器: 監聽 mousemove 事件，獲取滑鼠的 x 和 y 座標。
  • 更新跟隨元素位置: 將滑鼠的座標賦值給跟隨元素的 left 和 top 樣式，實現跟隨效果。
  • 可選的增強效果: 程式碼中註釋部分提供了一些額外的樣式和動畫效果，例如過渡、根據滑鼠速度改變大小、滑鼠懸停在特定元素上時改變樣式等。

這段程式碼提供了一個基本的滑鼠跟隨效果，幷包含了一些常見的增強功能。你可以根據自己的需求進行修改和擴充套件。

相關文章