Parallax Image.
스크롤에 따라 배경 이미지가 시차를 두고 움직이는 패럴럭스 효과를 적용합니다.
컨트롤 패널
배경 이미지 선택
패럴럭스 이동 범위 (px)
스프링 강성 (높을수록 빠름)
감쇠 (낮을수록 더 흔들림)
질량 (높을수록 느림)
멈춤 민감도
컨테이너 높이
이미지 높이
이미지 맞춤 방식
1
인터렉션 아이디어
언제:스크롤 이벤트가 발생할 때
무엇을:배경 이미지를
어떻게:스크롤 방향과 반대로 시차를 두고 움직이는 애니메이션으로 표현
2
바이브 프롬프트
ParallaxImage 컴포넌트를 만들어주세요. 이 컴포넌트는 스크롤 시 배경 이미지가 시차를 두고 움직이는 패럴럭스 효과를 보여줍니다. imageUrl prop으로 배경 이미지 경로를, parallaxRange prop으로 이동 범위를, stiffness와 damping prop으로 애니메이션 물리 속성을 설정할 수 있게 해주세요. containerHeight와 imageHeight prop으로 컨테이너와 이미지 높이를, objectFit prop으로 이미지 맞춤 방식을 지정할 수 있게 해주세요.