Фотографии лежат стопкой со сдвигом, каждая следующая чуть меньше предыдущей. При наведении курсора они на пружинах раскладываются в ровный ряд одна за другой, а при уходе курсора собираются обратно.
На сенсорных экранах и с клавиатуры стопка раскрывается нажатием. Если ряд не помещается по ширине, фотографии пропорционально уменьшаются.
Скопируйте эти файлы в components/photo-stack/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { PhotoStack } from "@/components/photo-stack/photo-stack";
const photos = [
{ src: "/images/sea.webp", alt: "Море" },
{ src: "/images/forest.webp", alt: "Лес" },
{ src: "/images/hills.webp", alt: "Холмы" },
];
export function Trip() {
return <PhotoStack images={photos} photoWidth={250} photoHeight={250} />;
}imagesФотографии: адрес и описание
Тип PhotoStackImage[]
photoWidth?Ширина фото в пикселях
Тип number·По умолчанию 200
photoHeight?Высота фото в пикселях
Тип number·По умолчанию 250
gap?Отступ между фото в разложенном ряду
Тип number·По умолчанию 18
peek?Сдвиг фото в стопке
Тип number·По умолчанию 14
stagger?Задержка между фото при раскрытии, в секундах
Тип number·По умолчанию 0.09
hint?Подсказка под стопкой, null скрывает её
Тип string | null·По умолчанию "Наведите, чтобы раскрыть"
radius?Скругление фото в пикселях
Тип number·По умолчанию 8
className?Классы корневого блока
Тип string