Zoom Scroll Background.
스크롤에 따라 배경 이미지가 부드럽게 확대/축소되는 인터랙션을 구현합니다. framer-motion을 활용하여 스크롤 진행도에 따른 자연스러운 줌 효과를 제공하며, 텍스트와 배경의 블렌드 모드를 통해 시각적 깊이감을 표현합니다.
Zoom Demo
컨트롤 패널
배경 이미지 선택
표시될 제목 텍스트
최소 확대 비율
최대 확대 비율
스프링 강성 (반응 속도)
스프링 댐핑 (감속도)
제목 텍스트 크기
제목 글꼴 두께
텍스트 블렌드 모드
1
인터렉션 아이디어
언제:사용자가 페이지를 스크롤할 때
무엇을:배경 이미지를
어떻게:스크롤 진행도에 따라 framer-motion의 useTransform을 활용하여 자연스러운 확대/축소 애니메이션으로 표현하고, 스프링 물리 효과를 적용하여 부드러운 전환 구현
2
바이브 프롬프트
ZoomScrollBg 컴포넌트를 만들어주세요. 이 컴포넌트는 스크롤에 따라 배경 이미지가 확대/축소되는 효과를 보여줍니다. imageSrc와 imageAlt prop으로 배경 이미지를, title prop으로 제목 텍스트를, minScale과 maxScale prop으로 최소/최대 확대 비율을 설정할 수 있게 해주세요. stiffness, damping, mass prop으로 스프링 물리 효과를, titleClassName prop으로 제목 스타일링을 설정할 수 있게 해주세요. framer-motion의 useScroll과 useTransform을 활용하여 스크롤 진행도를 감지하고, 배경 이미지의 scale을 동적으로 조절해주세요. 스프링 물리 효과를 적용하여 자연스러운 애니메이션을 구현하고, 오버레이와 블렌드 모드를 통해 텍스트 가독성을 확보해주세요.