Фотография лежит в рамке фиксированной высоты и при прокрутке сдвигается внутри неё медленнее, чем сама страница. За счёт этой разницы кажется, что снимок находится глубже остального контента.
Силу сдвига задаёт проп speed: чем он больше, тем заметнее отстаёт картинка. В демо дополнительно подключён хук useSmoothWheel, который сглаживает прокрутку колесом, чтобы движение было мягким и без рывков.
Скопируйте эти файлы в components/parallax-image/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { useRef } from "react";
import { ParallaxImage } from "@/components/parallax-image/parallax-image";
export function Hero() {
const scrollRef = useRef<HTMLDivElement>(null);
return (
<div ref={scrollRef} className="h-[640px] overflow-y-auto">
<div className="flex h-[1280px] items-center justify-center">
<ParallaxImage
src="/photos/lake.webp"
alt="Горное озеро"
containerClassName="w-full max-w-3xl"
className="h-[640px] w-full"
height="448px"
speed={40}
scrollContainer={scrollRef}
/>
</div>
</div>
);
}srcАдрес изображения
Тип string
alt?Альтернативный текст
Тип string·По умолчанию ""
speed?На сколько процентов сдвигается картинка, пока рамка проходит экран
Тип number·По умолчанию 30
height?Высота рамки
Тип string·По умолчанию "70vh"
radius?Скругление рамки в пикселях
Тип number
maxWidth?Максимальная ширина рамки в пикселях
Тип number
scrollContainer?Свой прокручиваемый контейнер вместо окна
Тип RefObject<HTMLElement | null>
containerClassName?Классы рамки
Тип string
className?Классы изображения
Тип string