Scroll
Parallax Scroll 3
A multi-column parallax gallery component that creates smooth scrolling effects with different speeds for each column, enhanced with Lenis smooth scrolling.
Usage
Installation
Features
- Multi-column Layout: Four columns with different parallax speeds
- Lenis Smooth Scrolling: Enhanced smooth scrolling experience
- Responsive Design: Adapts to different screen sizes with minimum column width
- Dynamic Heights: Each column has different starting positions and scroll speeds
- Image Gallery: Perfect for showcasing image collections with parallax effect
- Performance Optimized: Uses Framer Motion's useTransform for smooth animations
Technical Details
The component uses different transform values for each column:
- Column 1: 2x scroll speed
- Column 2: 3.3x scroll speed
- Column 3: 1.25x scroll speed
- Column 4: 3x scroll speed
Each column also has different vertical starting positions to create a staggered effect.
Parallax Scroll 1
A parallax scroll effect component that creates a smooth sliding animation with text overlays at the top and bottom as the content scrolls into view.
Scroll Active Section
A powerful scroll-based component that displays content on the left side while showing an active item preview on the right. Perfect for showcasing features, timelines, or step-by-step processes.