Карточки непрерывно едут по ленте, а фотография внутри каждой рамки смещается в противоположную сторону. Получается ощущение глубины: рамка движется быстрее, чем картинка в ней.
Параллакс следует за любым движением — автоскроллом, перетаскиванием, броском с инерцией и горизонтальной прокруткой тачпадом. При наведении лента плавно останавливается.
Скопируйте эти файлы в components/parallax-carousel/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { ParallaxCarousel } from "@/components/parallax-carousel/parallax-carousel";
const IMAGES = [
{ src: "/photos/1.webp", alt: "Мост" },
{ src: "/photos/2.webp", alt: "Лес" },
{ src: "/photos/3.webp", alt: "Пляж" },
];
export function Gallery() {
return <ParallaxCarousel images={IMAGES} cardWidth={320} cardHeight={600} parallax={60} />;
}images?Изображения карточек
Тип ParallaxImage[]·По умолчанию четыре фото
cardWidth?Ширина карточки в пикселях
Тип number·По умолчанию 200
cardHeight?Высота карточки в пикселях
Тип number·По умолчанию 280
gap?Отступ между карточками
Тип number·По умолчанию 18
speed?Скорость в пикселях в секунду
Тип number·По умолчанию 34
parallax?Смещение фото внутри рамки в пикселях
Тип number·По умолчанию 56
pauseOnHover?Останавливать при наведении
Тип boolean·По умолчанию true
draggable?Перетаскивание и бросок
Тип boolean·По умолчанию true
wheelControl?Горизонтальная прокрутка тачпадом
Тип boolean·По умолчанию true
mobileScale?Масштаб карточек на телефоне
Тип number·По умолчанию 0.62
direction?Направление движения
Тип 1 | -1·По умолчанию 1
label?Подпись для экранных дикторов
Тип string·По умолчанию "Галерея изображений"
className?Классы корневого блока
Тип string