使用 HTML、CSS 和 JavaScript 實現鑽石噴灑效果

鑽石噴灑效果實現#

主要是使用 GSAP 來實現動畫效果，並且管理 DOM 元素，減少 DOM 操作的頻率。

基礎架構#

HTML 結構

<!DOCTYPE html>
<html>
<head>
  <title>鑽石噴灑效果</title>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
</body>
</html>

CSS 樣式

.diamond {
  width: 60px;
  height: 60px;
  position: absolute;
  will-change: transform, opacity;
  background-image: url('diamond.png');
  background-size: cover;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

核心實現#

管理目標物件

const DIAMOND_COUNT = 10;
const DIAMOND_POOL_SIZE = 30;

function createDiamondPool() {
  for (let i = 0; i < DIAMOND_POOL_SIZE; i++) {
    const diamond = document.createElement("div");
    diamond.classList.add("diamond");
    diamond.style.display = 'none';
    document.body.appendChild(diamond);
    diamondPool.push(diamond);
  }
}

動畫控制

function animateDiamond(diamond, clickX, clickY) {
  const [endX, endY] = getRandomPointInCircle(clickX, clickY, 100);
  
  // 噴射動畫
  gsap.to(diamond, {
    duration: 0.4,
    x: endX - 30,
    y: endY - 30,
    scale: 0.8 + Math.random() * 0.4,
    rotation: (Math.random() - 0.5) * 60,
    ease: "power2.out",
    onComplete: handleFallAnimation
  });
}

function handleFallAnimation(diamond) {
  gsap.to(diamond, {
    duration: 0.6,
    y: window.innerHeight + 50,
    opacity: 0,
    ease: "power1.in",
    onComplete: () => returnDiamond(diamond)
  });
}

效能優化#

使用對象池減少 DOM 操作
應用 will-change 優化動畫性能
實現點擊節流控制

const CLICK_THRESHOLD = 100;
let lastClickTime = 0;

document.addEventListener("click", (event) => {
  if (Date.now() - lastClickTime < CLICK_THRESHOLD) return;
  lastClickTime = Date.now();
  
  createDiamonds(event.clientX, event.clientY);
});

範例#

See the Pen 鑽石噴灑效果 by Zero (@Serment) on CodePen.