Parallax Scroll
Create stunning depth effects where background elements move slower than foreground content during scrolling. Perfect for hero sections, product showcases, and immersive web experiences.
Pro features
What the Pro version adds to this component.
Parallax Effect
Scroll-based parallax animation that creates depth perception
Speed Control
Precise parallax speed adjustment between 0-1
3D Perspective
3D depth effect with adjustable perspective
Size Control
Full control over width and height
Overflow Control
Hidden, visible, scroll, auto overflow options
Dual Direction Support
Both vertical and horizontal parallax support
Installation
Install via CLI
npx @moontra/moonui-cli add parallax-scrollUsage
🏔️ Mountain View
Experience the depth of parallax
Background moves slower than this content
Examples
🏙️ City Skyline Hero
City background with parallax depth effect for hero sections
📱 Product Showcase
Multi-layer parallax for product presentations with floating elements
💬 Testimonial Section
Customer testimonials with floating background elements
🌌 Galaxy Exploration
Deep space parallax with 3D perspective and floating stars
🖼️ Image Gallery Reveal
Photo gallery with layered parallax reveal effect for showcasing work