Interactive Vertical Parallax Cursor Navigation

This is an Interactive Vertical Parallax Cursor Navigation. It combines large-scale typography with a dynamic image-reveal system. Its function is to provide an immersive, tactile menu experience for high-end creative portfolios, where the user’s cursor physically “steers” the list and uncovers visual content linked to each item.

Specs

• Weight: ~3 KB (Logic only). Minimal DOM footprint.
• Performance: High. The global panning uses the Web Animations API (WAAPI), which is offloaded to the browser’s compositor thread for jitter-free motion.
• Theming / Customization: Highly flexible. Uses clamp() for fluid scaling of text and images. Backgrounds and colors are set via standard CSS.
• Responsiveness: Fluid. Uses vmax, vw, and clamp() to ensure the layout remains functional across all screen sizes, though interaction is primary for mouse-users.
• Web APIs: Web Animations API, DOMRect API.
• Graceful Degradation: Fails to a standard vertical list of links. Images are hidden by default (opacity: 0).

Anatomy

The component functions as a two-part coordination system.

• HTML (The Skeleton): A standard <nav> wrapping <a> tags. Each link houses a <span> for the text and an <img> for the reveal.
• CSS (The Skin): Minimalist dark-mode aesthetic. Links are set to relative to allow the absolute images to float relative to their parents. pointer-events: none on the images ensures they don’t block mouse detection on the links.
• JS (The Nervous System): Orchestrates two separate movements.
  1. Local Tracking: Updates the left and top properties of images to follow the cursor within the link boundary.
  2. Global Panning: Animates the entire translateY of the navigation container based on the cursor’s vertical percentage in the window.

Logic

The standout technical feature is the “Viscous Panning” implemented via WAAPI.

window.onmousemove = e => {
  const percent = e.clientY / window.innerHeight;
  nav.animate({
    transform: `translateY(${percent * nav.offsetHeight * -1}px)`
  }, {
    fill: "forwards",
    duration: 4000
  })
}

Instead of 1:1 scroll-snapping, the logic calculates the mouse’s vertical position as a decimal. This decimal is used to offset the entire menu. The 4000ms duration creates a “heavy” momentum effect — the menu doesn’t just move; it drifts, providing a premium, viscous feel to the interaction that hides the mechanical nature of the displacement.

Feel

Frictionless and organic. The way the images scale up and follow the cursor creates a strong “1-to-1” connection between the user and the content. The slow vertical drift of the menu gives a sense of navigating through a large physical space, making the interface feel cinematic rather than static.