Parallax Image Gallery

A visually stunning image gallery with multi-layer parallax scrolling. Images move at different speeds to create depth. Features include smooth scrolling, scroll-triggered reveal animations, lazy loading, and a built-in lightbox modal.

Build an immersive photo gallery with a multi-layer parallax effect. As users scroll, images translate at varying speeds, creating a sense of 3D depth and movement. This snippet combines modern CSS Grid layouts with vanilla JavaScript for performance-focused animations.

Features

• Multi-Layer Parallax: Each image has a configurable speed (data-speed), making background layers move slower than foreground layers.
• Scroll Reveals: Images fade and slide into view as they enter the viewport using Intersection Observer.
• Lightbox Modal: A clean, full-screen modal allows users to view high-resolution versions of images with a simple click.
• Responsive Grid: The layout adapts gracefully to different screen sizes, stacking on mobile and expanding on desktop.
• Performance: Uses requestAnimationFrame for smooth scrolling and native lazy loading for images.

Implementation Guide

The core effect is achieved by updating the transform: translateY() property of each image based on the scroll position and its assigned speed factor.

// Parallax Logic
window.addEventListener('scroll', () => {
  let scrollY = window.scrollY;
  
  items.forEach((item) => {
    let speed = item.getAttribute('data-speed');
    // Calculate movement based on scroll position and speed
    let movement = (scrollY * speed) / 10; 
    
    // Apply transform only when element is in view for performance
    if (isInViewport(item)) {
       item.style.transform = `translateY(${movement}px)`;
    }
  });
});

CSS Grid Structure

The gallery uses a 12-column CSS Grid for flexible and creative image placement.

.parallax-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
}

/* Custom placement for variety */
.item-1 { grid-column: span 6; height: 600px; }
.item-3 { grid-column: 2 / span 5; margin-top: -50px; }

Use this snippet to showcase portfolios, photography, or product collections in a way that feels dynamic and alive.