rain
40 lines
1.6 KiB
JavaScript
40 lines
1.6 KiB
JavaScript
(function () {
|
|
// 只在精确指针设备上启用微动效，触屏和减少动效偏好下保持静态。
|
|
const finePointer = window.matchMedia("(hover: hover) and (pointer: fine)").matches;
|
|
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
|
|
if (!finePointer || reduceMotion) return;
|
|
|
|
document.querySelectorAll(".tilt-card").forEach((card) => {
|
|
// 卡片倾斜角度通过 CSS 变量传递，具体视觉效果仍由 CSS 控制。
|
|
card.addEventListener("pointermove", (event) => {
|
|
const rect = card.getBoundingClientRect();
|
|
const px = (event.clientX - rect.left) / rect.width - 0.5;
|
|
const py = (event.clientY - rect.top) / rect.height - 0.5;
|
|
card.style.setProperty("--tilt-y", `${px * 5}deg`);
|
|
card.style.setProperty("--tilt-x", `${py * -5}deg`);
|
|
});
|
|
|
|
card.addEventListener("pointerleave", () => {
|
|
card.style.setProperty("--tilt-y", "0deg");
|
|
card.style.setProperty("--tilt-x", "0deg");
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll(".magnetic").forEach((item) => {
|
|
// 品牌 logo 不做磁吸，避免导航视觉跳动。
|
|
if (item.classList.contains("brand") || item.querySelector(".brand-logo")) return;
|
|
|
|
item.addEventListener("pointermove", (event) => {
|
|
const rect = item.getBoundingClientRect();
|
|
const x = event.clientX - rect.left - rect.width / 2;
|
|
const y = event.clientY - rect.top - rect.height / 2;
|
|
item.style.transform = `translate(${x * 0.08}px, ${y * 0.08}px)`;
|
|
});
|
|
|
|
item.addEventListener("pointerleave", () => {
|
|
item.style.transform = "";
|
|
});
|
|
});
|
|
})();
|