About Parallax Gallery X
An infinite portfolio slider with parallax, interactive minimap thumbnail navigation, and auto-scroll. Images and videos supported with automatic video thumbnail generation. Project info overlay on every slide. Built for creative portfolios, photography galleries, and visual showcases that need a full-screen immersive presentation.
Features
Infinite seamless loop through projects in both directions
Parallax on main media and minimap thumbnails independently
Interactive vertical minimap — click any thumbnail to jump to project
Active minimap thumbnail highlighted with enhanced border and scale
Automatic video thumbnail generation via canvas API
Project info overlay — title, category and year with gradient for readability
Auto-scroll with configurable interval — pauses on user interaction
Pauses when component leaves viewport for performance
Image and video support — videos autoplay, loop and muted by default
Snap-to-project after scroll stops
Virtual scrolling — only visible projects plus buffer rendered
Touch drag support on mobile
Minimap hidden on mobile — adjusted typography and spacing
Full scroll physics controls
Unlimited projects via array
No dependencies
Property Controls
Projects — unlimited · title, category, year, media type, image or video per project
Scroll Physics
Scroll Speed (0.1–2) · Smoothness (0.01–0.2)
Max Velocity (50–300) · Snap Duration (100–1000ms)
Visual
Background Color · Image Scale (1–3) · Buffer Size (2–10)
Auto-Scroll
Enable/disable toggle · Interval (1000–10000ms)
Technical Details
RequestAnimationFrame render loop with separate target and current positions
Lerp-based smooth interpolation for buttery parallax
Ref-based animation state avoids React re-renders
Map-based element references for efficient DOM access
Canvas API asynchronous video thumbnail generation at 0.1s mark
IntersectionObserver pauses animation when off-screen
startTransition for non-blocking React 18 updates
CORS error handling for video thumbnail generation
