База знаний

Появление точек при движении мыши

Клонировать проект

//DOM load event
window.addEventListener("DOMContentLoaded", () => {
  const card = document.querySelectorAll(".card");

  let spotlightSize =
    "#000 0px, rgba(0, 0, 0, 0.1) 30px, rgba(0, 0, 0, 0.005) 80px, rgba(0, 0, 0, 0.00) 200px";
  // "#000 0px, rgba(0, 0, 0, 0.2) 100px";

  card.forEach((e) => {
    const spotlight = e.querySelector(".spotlight");
    e.addEventListener("mousemove", (mouse) =>
      updateSpotlight(mouse, spotlight)
    );
    e.addEventListener("mouseenter", () => {
      spotlight.style.opacity = "1";
    });
    e.addEventListener("mouseleave", () => {
      spotlight.style.opacity = "0";
    });
  });

  function updateSpotlight(e, spotlightElement) {
    const x = e.clientX - spotlightElement.getBoundingClientRect().left;
    const y = e.clientY - spotlightElement.getBoundingClientRect().top;
    if (spotlightElement) {
      spotlightElement.style.maskImage = `radial-gradient(circle at ${x}px ${y}px, ${spotlightSize}`;
    }
  }
});