scroll 썸네일형 리스트형 React에서 스크롤 기반 Parallax 효과 구현하기 Parallax는 스크롤에 따라 배경과 콘텐츠의 이동 속도를 다르게 하여 깊이감을 주는 시각 효과입니다. React에서 성능을 고려해 구현하면 랜딩 페이지, 히어로 섹션, 갤러리 등에서 높은 몰입감을 제공할 수 있습니다.1. 핵심 개념과 설계기본 원리는 스크롤 위치에 비례한 오프셋을 계산해 요소의 transform 또는 backgroundPosition을 업데이트하는 것입니다. 성능을 위해 transform: translate3d와 requestAnimationFrame, passive 스크롤 리스너를 사용합니다. iOS에서 background-attachment: fixed가 제한적이므로 엘리먼트 기반 Parallax가 안전합니다.2. CSS 배경 Parallax (간단하지만 모바일 제한)배경 이미지를.. 더보기 이전 1 다음