Parallax Columns
Uilora Parallax Columns — cinematic scroll-driven gallery with three independent layers.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | [...9 image URLs] | Array of image URLs to display in columns. |
| backgroundColor | string | #f5f5f4 | Background color (hex, rgb, or hsl). |
| columnCount | number | 3 | Number of columns (2, 3, or 4). |
When to Use
Ideal for high-end fashion portfolios, editorial magazines, and creative agencies that want a cinematic 'Parallax' aesthetic. Use this gallery to showcase photography with a sense of layered movement and sophisticated depth.
Best Practices
Follow React best practices by pairing this with professional, high-contrast photography. Maintain consistent spacing within your design system by keeping the column gaps uniform. Optimize for performance by managed the scroll-trigger renders.
Why This Component Matters
Parallax columns communicate digital power, depth, and structural complexity. This Uilora-ready template helps you build an interface that feels architectural and premium, leaving a lasting visual impression on high-value clients.
FAQ
QHow does the parallax work?
The component uses localized column groups that move at varying parallax speeds during scroll, creating an 'Immersive' physical depth effect.
QIs it mobile responsive?
Yes, the column counts and parallax offsets scale dynamically for mobile, Ensuring the editorial flow remains impactful on small screens.
QCan I use color images?
Absolutely, while optimized for high-fidelity monochrome, you can apply any visual assets to the column layers effectively.
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling, branded for Uilora.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics, branded for Uilora.
Wabi Sabi Layout
Japanese-inspired bento grid with wabi-sabi aesthetics, imperfections, and Uilora branding.