main.js

/**
 * 字节引力首页交互脚本
 */

// 生成星星
function createStars() {
  const container = document.getElementById("stars");
  const starCount = 100;

  for (let i = 0; i < starCount; i++) {
    const star = document.createElement("div");
    star.className = "star";
    star.style.left = Math.random() * 100 + "%";
    star.style.top = Math.random() * 100 + "%";
    star.style.width = Math.random() * 3 + 1 + "px";
    star.style.height = star.style.width;
    star.style.animationDelay = Math.random() * 3 + "s";
    star.style.animationDuration = Math.random() * 2 + 2 + "s";
    container.appendChild(star);
  }
}


// 滚动动画 - IntersectionObserver
function initScrollAnimations() {
  const observerOptions = {
    threshold: 0.1,
    rootMargin: "0px 0px -50px 0px",
  };

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("visible");

        // 如果是统计区域，触发数字动画
        if (entry.target.classList.contains("stats-section")) {
          animateNumbers();
        }
      }
    });
  }, observerOptions);

  // 观察所有需要动画的元素
  document
    .querySelectorAll(".fade-in, .fade-in-left, .fade-in-right")
    .forEach((el) => {
      observer.observe(el);
    });
}

// 数字计数动画
function animateNumbers() {
  const numbers = document.querySelectorAll(".stat-number[data-target]");

  numbers.forEach((num) => {
    if (num.dataset.animated) return;
    num.dataset.animated = "true";

    const target = parseInt(num.dataset.target);
    const suffix = num.dataset.suffix || "";
    const duration = 2000;
    const step = target / (duration / 16);
    let current = 0;

    const updateNumber = () => {
      current += step;
      if (current < target) {
        num.textContent = Math.floor(current) + suffix;
        requestAnimationFrame(updateNumber);
      } else {
        num.textContent = target + suffix;
      }
    };

    updateNumber();
  });
}

// 3D卡片倾斜效果
function init3DCards() {
  const cards = document.querySelectorAll(".product-card");

  cards.forEach((card) => {
    card.addEventListener("mousemove", (e) => {
      const rect = card.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      const centerX = rect.width / 2;
      const centerY = rect.height / 2;

      const rotateX = (y - centerY) / 40;
      const rotateY = (centerX - x) / 40;

      card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-5px)`;
    });

    card.addEventListener("mouseleave", () => {
      card.style.transform =
        "perspective(1000px) rotateX(0) rotateY(0) translateY(0)";
    });
  });
}

// 鼠标光晕效果
function initCursorGlow() {
  const glow = document.getElementById("cursorGlow");
  if (!glow) return;

  let isActive = false;

  document.addEventListener("mousemove", (e) => {
    if (!isActive) {
      isActive = true;
      glow.classList.add("active");
    }

    glow.style.left = e.clientX + "px";
    glow.style.top = e.clientY + "px";
  });

  document.addEventListener("mouseleave", () => {
    isActive = false;
    glow.classList.remove("active");
  });
}

// 视差效果
function initParallax() {
  const gravityField = document.querySelector(".gravity-field");
  if (!gravityField) return;

  document.addEventListener("mousemove", (e) => {
    const x = (e.clientX / window.innerWidth - 0.5) * 20;
    const y = (e.clientY / window.innerHeight - 0.5) * 20;

    gravityField.style.transform = `translate(calc(-50% + ${x}px), calc(-50% + ${y}px))`;
  });
}

// 初始化所有效果
document.addEventListener("DOMContentLoaded", () => {
  createStars();
  initScrollAnimations();
  init3DCards();
  initCursorGlow();
  initParallax();
});