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
Unlock advanced capabilities with the Pro version
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 moonui-cli@latest 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
🏙️ Welcome to the City
Buildings move slower, creating depth
📱 Product Showcase
Multi-layer parallax for product presentations with floating elements
✨ Revolutionary Design
Experience layers moving at different speeds
💬 Testimonial Section
Customer testimonials with floating background elements
"This parallax effect creates an amazing sense of depth. Perfect for modern web design!"
John Developer
Senior Frontend Engineer
🌌 Galaxy Exploration
Deep space parallax with 3D perspective and floating stars
Deep Space Explorer
Navigate through the cosmic parallax
🖼️ Image Gallery Reveal
Photo gallery with layered parallax reveal effect for showcasing work