Parallax Columns
パララックスカラム
Columns that drift at different rates as you scroll, so the grid gains depth without any of it actually moving in Z. Neighbouring columns travel in opposite directions — that opposition separates them far more clearly than a shared drift at varying speed would. Built with Framer Motion useScroll↗↗ and Tailwind CSS.
1.1
1.2
1.3
1.4
1.5
2.1
2.2
2.3
2.4
2.5
3.1
3.2
3.3
3.4
3.5
Installation
Install the following dependencies:1
npm install framer-motionCopy and paste the following code into a new component file:2
"use client"
import { motion, useScroll, useTransform, type MotionValue } from "framer-motion"
import { useRef, type ReactNode } from "react"
export type ParallaxColumn = {
id: string | number,
items: ReactNode[]
}
How to use it3
"use client"
import { ParallaxColumns } from "@/components/ui/parallax-columns"
const columns = [
{ id: 1, items: [<img key="a" src="/a.jpg" alt="" />, <img key="b" src="/b.jpg" alt="" />] },
{ id: 2, items: [<img key="c" src="/c.jpg" alt="" />, <img key="d" src="/d.jpg" alt="" />] },
]
export default function Page() {
Props
ParallaxColumns
| Name | Default | Description |
|---|---|---|
| columns | — | ParallaxColumn[] The columns, each holding its own list of items |
| spread | 120 | number Base travel in pixels; later columns move proportionally further |
| height | 420 | number Height of the scrollable viewport in pixels |
| dark | false | boolean Render the dark palette |
ParallaxColumn (type)
| Name | Default | Description |
|---|---|---|
| id | — | string | number Stable key for the column |
| items | — | ReactNode[] The cells stacked in this column |