All projects · UI Components & Interactions
Luxury Real Estate Side-Scrolling Portfolio Studio (CSS Sticky & Overflow-X)
An editorial luxury real estate showcase featuring a pinned side-scrolling portfolio that changes scroll direction from vertical to horizontal…
An editorial luxury real estate showcase featuring a pinned side-scrolling portfolio that changes scroll direction from vertical to horizontal while remaining fixed in place, powered by CSS position: sticky, overflow-x: scroll, normalized runway math, and interactive state filtering.
- Converts vertical scroll inputs seamlessly into horizontal estate card movement via overflow-x: scroll
- Viewport sticky pinning (position: sticky; top: 0) keeps the portfolio locked in place throughout traversal
- Dynamic runway height calibration: Height = 100vh + (track.scrollWidth - window.innerWidth)
- Includes 6 authentic luxury properties with verified high-res assets extracted directly from reference recording
- Multi-section continuity featuring Pacific Heights Villa intro hero and dark navy Properties Across the Nation outro
- Dual-engine ergonomics combining document scroll mapping with direct mouse wheel deltaY interception
- Interactive property detail modal, state filter pills (CA, NV, AZ), and automated animated tour playback
- Built-in 8-point in-browser diagnostic test suite verifying sticky pinning, overflow-x, and DOM hygiene
Built with: CSS Sticky, Overflow-X Scroll, Scroll Direction Translation, Runway Math, Luxury Real Estate UI, JavaScript (Vanilla), Responsive Design