Галерея из четырёх колонок фотографий внутри собственной прокручиваемой области. Пока блок проходит через экран, каждая колонка смещается вниз со своей скоростью, поэтому ряды расходятся и сходятся, как слои с разной глубиной.
Над галереей и под ней стоят короткие подсказки с тонкой градиентной линией. Скорость параллакса, зазор между кадрами и скругление настраиваются, а высота колонок подстраивается под размер контейнера.
Скопируйте эти файлы в components/column-parallax-gallery/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { ColumnParallaxGallery } from "@/components/column-parallax-gallery/column-parallax-gallery";
const first = ["/photos/1.webp", "/photos/2.webp", "/photos/3.webp"];
const second = ["/photos/4.webp", "/photos/5.webp", "/photos/6.webp"];
export function Gallery() {
return (
<div className="h-[720px]">
<ColumnParallaxGallery columns={[first, second, first, second]} topHint="листайте вниз" speed={1.2} />
</div>
);
}columns?Фотографии для четырёх колонок
Тип [string[], string[], string[], string[]]
topHint?Подсказка над галереей
Тип ReactNode·По умолчанию "scroll down to see"
bottomHint?Подсказка под галереей
Тип ReactNode·По умолчанию "scroll Up to see"
speed?Множитель скорости параллакса
Тип number·По умолчанию 1
gap?Зазор между кадрами и отступ галереи в cqw
Тип number·По умолчанию 2
radius?Скругление кадров в пикселях
Тип number·По умолчанию 0
className?Классы прокручиваемого контейнера
Тип string