멀티 레이어 패럴랙스 히어로

제작 과정

한 줄 요약

배경산헤드라인전경 파티클이 포인터 이동에 각기 다른 비율로 반응해 깊이감을 만드는 멀티 레이어 패럴랙스 히어로입니다.

이럴 때 필요해요

히어로 영역에 입체감과 생동감을 주고 싶을 때 브랜드 랜딩, 캠페인 메인 비주얼 등.

어떻게 동작하나

pointer/touch 이동을 중심 기준 offset으로 정규화한다.
목표값만 ref에 저장하고 mousemove마다 리렌더하지 않는다.
RAF 루프가 lerp로 감속하며 각 레이어 transform을 갱신한다.
전경은 많이, 배경은 적게 깊이 비율을 다르게 준다.

놓치기 쉬운 것

per-mousemove setState는 성능을 해친다 ref+RAF로 처리.
offset은 장면 rect 기준이어야 임베드에서도 맞는다.
prefers-reduced-motion이면 정지한다.

이런 곳에 써요

브랜드/제품 랜딩 히어로
캠페인 메인 비주얼

import type { Metadata } from "next"; import { ParallaxLayersDemo } from "./-components/ParallaxLayersDemo"; export const metadata: Metadata = { title: "패럴랙스 레이어 (데모)", description: "포인터·터치 움직임에 여러 레이어가 서로 다른 비율로 따라 움직이며 깊이를 만드는 멀티 레이어 패럴랙스 히어로. ref + transform 직접 갱신, lerp 감속, prefers-reduced-motion 정지.", robots: { index: false, follow: false }, }; export default function Page() { return <ParallaxLayersDemo />; }