Столбик больших карточек с фотографиями. Дойдя до верхнего края, каждая карточка прилипает и продолжает прокрутку уже на месте: постепенно уменьшается и поворачивается, а фото внутри вращается в обратную сторону и остаётся ровным.
Следующие карточки наезжают сверху, собирая стопку. Размеры, отступ прилипания, путь сжатия и угол поворота настраиваются.
Скопируйте эти файлы в components/sticky-scroll-cards/:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { useRef } from "react";
import { StickyScrollCards } from "@/components/sticky-scroll-cards/sticky-scroll-cards";
const photos = ["/photos/1.webp", "/photos/2.webp", "/photos/3.webp"];
export function Cards() {
const scrollRef = useRef<HTMLDivElement>(null);
return (
<div ref={scrollRef} className="h-[720px] overflow-y-auto" style={{ containerType: "size" }}>
<StickyScrollCards images={photos} container={scrollRef} hint="прокрутите вниз" rotation={60} />
</div>
);
}imagesФотографии карточек
Тип string[]
hint?Подсказка вверху
Тип string
container?Прокручиваемый контейнер
Тип RefObject<HTMLElement | null>
height?Высота карточки в cqh
Тип number·По умолчанию 80
top?Отступ прилипания сверху в cqh
Тип number·По умолчанию 10
gap?Зазор между карточками в cqh
Тип number·По умолчанию 10
radius?Скругление карточки в пикселях
Тип number·По умолчанию 32
maxWidth?Максимальная ширина карточки в пикселях
Тип number·По умолчанию 896
distance?Путь прокрутки до полного сжатия в пикселях
Тип number·По умолчанию 10000
rotation?Угол поворота к концу сжатия в градусах
Тип number·По умолчанию 100