Parallax columns
Three columns that scroll at different speeds.
Behaviour
- Columns rise into line at different rates as the section scrolls in.
- A spring eases each column toward its scroll position; native scrolling is untouched.
- Reduced motion: a plain static grid.
Props
| Prop | Type | Description |
|---|---|---|
| columns | [ReactNode[], ReactNode[], ReactNode[]] | The items in each of the three columns. |
| speeds | [number, number, number]default [0.12, 0.22, 0.05] | Viewport heights each column starts below its place. |
| className | string | Extra classes on the wrapper. |
| container | RefObject<HTMLElement> | Follow a scrolling box instead of the page. |
Installation
npx shadcn@latest add https://purrfectui.com/r/parallax-columns.jsonHow to use
import { ParallaxColumns } from "@/components/ui/parallax-columns";
<ParallaxColumns columns={[colA, colB, colC]} speeds={[0.12, 0.22, 0.05]} />Source code
Loading…
License
MIT. Copy it into your project and change it as you like.