Сцена закрепляется на экране на время длинной прокрутки, а фотографии сменяют друг друга по мере движения колеса. Новое фото открывается снизу вверх через маску и проявляется из пересвеченной, контрастной вспышки к нормальной яркости, одновременно слегка уменьшаясь.
Предыдущий кадр остаётся под новым и исчезает на середине перехода. Справа тонкая вертикальная шкала заполняется в пределах каждого кадра, показывая, сколько осталось до следующей фотографии.
Скопируйте эти файлы в components/scroll-image-reveal/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { ScrollImageReveal } from "@/components/scroll-image-reveal/scroll-image-reveal";
const items = [
{ title: "Город", image: "/photos/city.webp" },
{ title: "Горы", image: "/photos/mountains.webp" },
{ title: "Море", image: "/photos/sea.webp" },
];
export function Gallery() {
return <ScrollImageReveal items={items} scrollLength={6} />;
}itemsФото с подписью: title и image
Тип ScrollImageRevealItem[]
container?Прокручиваемый контейнер, если прокрутка идёт не у страницы
Тип RefObject<HTMLElement | null>·По умолчанию окно
viewportHeight?Высота закреплённой сцены
Тип number | string·По умолчанию "100vh"
scrollLength?Длина прокрутки в высотах сцены
Тип number·По умолчанию 10
background?Фон сцены
Тип string·По умолчанию "#121212"
indicatorColor?Цвет заполнения шкалы прогресса
Тип string·По умолчанию "#ffffff"
imageWidth?Максимальная ширина фото, px
Тип number·По умолчанию 576
imageHeight?Высота фото в процентах от сцены
Тип number·По умолчанию 70
shrink?Насколько уменьшается кадр при смене (доля)
Тип number·По умолчанию 0.25
className?Классы закреплённой сцены
Тип string