Parallax Scroll
Multi-column image grid with parallax scrolling at different speeds per column.
Preview
Parallax Scroll
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Portfolio pages and image showcase sections.
Why this component matters
Parallax creates depth perception, making a flat page feel three-dimensional.
Usage guidance
Use with 3 columns of images. Each column scrolls at a different speed. Ensure images are high-quality and consistently sized.
Installation
bash
npx shadcn@latest add @aceternity/parallax-scrollUsage
example.tsxtsx
import { ParallaxScroll } from "@/components/ui/parallax-scroll";
export default function Example() {
return (
<ParallaxScroll>
{/* Your content here */}
</ParallaxScroll>
);
}Source
parallax-scroll.tsx
components/ui/parallax-scroll.tsx