article-tiles.js

The tiles.js file is used to manage the visual “spotlight effect” experience on the article tiles found in the article/tiles.html partial layout.

How it works

This functionality is nearly identical to the js/glossary.js functionality – with the exception of the utilized class name, tile

If the page has elements with the tile class, this script updates their background radial gradient values to mirror the position of the mouse.

The color of the spotlight effect is determined by css/colors.css, specifically:

  • inside: var(--primary-gradient-color)
  • outside: var(--secondary-gradient-color)

Source code 

document.addEventListener("DOMContentLoaded", () => {
  if (document.querySelectorAll(".tile")) {
    const cards = document.querySelectorAll(".tile");
    const positions = { x: 50, y: 50 }; // Default to center

    function animate() {
      cards.forEach((card) => {
        const rect = card.getBoundingClientRect();
        const mouseX = ((positions.x - rect.left) / rect.width) * 100;
        const mouseY = ((positions.y - rect.top) / rect.height) * 100;
        card.style.background = `radial-gradient(circle at ${mouseX}% ${mouseY}%, var(--primary-gradient-color), var(--secondary-gradient-color))`;
      });
      requestAnimationFrame(animate);
    }

    cards.forEach((card) => {
      card.addEventListener("mousemove", (e) => {
        // Update gradient position
        positions.x = e.clientX;
        positions.y = e.clientY;
      });

      card.addEventListener("mouseover", () => {
        card.style.transform = "translateY(-10px) scale(1.05)";
        card.style.boxShadow = "0 20px 30px #00000033";
      });

      card.addEventListener("mouseout", () => {
        card.style.transform = "translateY(0) scale(1.0)";
        card.style.boxShadow = "";
      });
    });

    animate();
  }
});
article-tabs.js article-toc.js