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

鑽石噴灑效果實現#

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

基礎架構#

HTML 結構

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <title>鑽石噴灑效果</title>
5
</head>
6
<body>
7
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
8
</body>
9
</html>

CSS 樣式

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

核心實現#

管理目標物件

1
const DIAMOND_COUNT = 10;
2
const DIAMOND_POOL_SIZE = 30;
3

4
function createDiamondPool() {
5
  for (let i = 0; i < DIAMOND_POOL_SIZE; i++) {
6
    const diamond = document.createElement("div");
7
    diamond.classList.add("diamond");
8
    diamond.style.display = 'none';
9
    document.body.appendChild(diamond);
10
    diamondPool.push(diamond);
11
  }
12
}

動畫控制

1
function animateDiamond(diamond, clickX, clickY) {
2
  const [endX, endY] = getRandomPointInCircle(clickX, clickY, 100);
3

4
  // 噴射動畫
5
  gsap.to(diamond, {
6
    duration: 0.4,
7
    x: endX - 30,
8
    y: endY - 30,
9
    scale: 0.8 + Math.random() * 0.4,
10
    rotation: (Math.random() - 0.5) * 60,
11
    ease: "power2.out",
12
    onComplete: handleFallAnimation
13
  });
14
}
15

16
function handleFallAnimation(diamond) {
17
  gsap.to(diamond, {
18
    duration: 0.6,
19
    y: window.innerHeight + 50,
20
    opacity: 0,
21
    ease: "power1.in",
22
    onComplete: () => returnDiamond(diamond)
23
  });
24
}

效能優化#

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

1
const CLICK_THRESHOLD = 100;
2
let lastClickTime = 0;
3

4
document.addEventListener("click", (event) => {
5
  if (Date.now() - lastClickTime < CLICK_THRESHOLD) return;
6
  lastClickTime = Date.now();
7

8
  createDiamonds(event.clientX, event.clientY);
9
});

範例#

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