🌌 패럴랙스 속도 계산기 | 레이어 이동량 즉시 환산

스크롤 거리 (px)

배경 레이어 속도 계수 (0 = 화면 고정, 1 = 콘텐츠와 동일)

중간 레이어 속도 계수

전경 레이어 속도 계수

패럴랙스 이동량은 계수로 결정된다

패럴랙스는 레이어마다 스크롤에 반응하는 속도를 다르게 주어 깊이를 만드는 기법입니다. 속도 계수가 1이면 콘텐츠와 똑같이 움직이고, 0이면 화면에 고정되며, 1보다 크면 콘텐츠보다 빠르게 지나갑니다. 스크롤 거리와 레이어별 계수를 넣으면 각 레이어가 실제로 몇 px 움직이는지와 CSS에 넣을 보정값이 나옵니다.

계산 방식

화면상 이동 = 스크롤 거리 × 계수, 콘텐츠 대비 상대 이동 = 스크롤 거리 × (계수 − 1), 보정에 필요한 값 = 스크롤 거리 × (1 − 계수) 입니다. 일반 흐름의 요소는 스크롤만큼 올라가므로, 그 차이를 translateY 로 되돌려 주는 구조입니다. 2026년 10월 기준 W3C 명세와 웹 접근성 지침은 권장 계수를 정하지 않습니다.

한계와 접근성

관성 스크롤, 스크롤 이벤트 지연, 레이어 합성 비용은 계산에 넣지 않고 계수가 적절한지도 판정하지 않습니다. 패럴랙스는 어지러움을 유발할 수 있으므로 prefers-reduced-motion: reduce 를 반드시 존중해 이동을 끄거나 크게 줄이고, 효과 없이도 내용이 전달되게 두세요.

자주 묻는 질문

속도 계수는 몇으로 두는 게 좋을까요?

공인된 권장 계수가 없어 이 도구는 값을 제시하지 않습니다. 직접 정한 계수를 넣으면 스크롤 거리마다 레이어가 몇 px 움직이는지 나오므로 그 수치로 조정하세요.

계수를 1보다 크게 하면 어떻게 되나요?

레이어가 콘텐츠보다 빠르게 위로 지나가 반대 방향 패럴랙스가 됩니다. 콘텐츠 대비 이동이 양수로 표시되고, 그만큼 레이어 아래쪽에 여유 높이가 필요합니다.

모션에 민감한 사용자는 어떻게 하나요?

prefers-reduced-motion: reduce 를 존중해 레이어 이동을 끄는 것이 기본입니다. 결과에 표시된 CSS 블록을 넣어 transform 을 none 으로 되돌리세요.

🌌패럴랙스 스크롤 속도 계산기

관련된 도구

z-index 레이어 시스템 설계 가이드

CSS 다중 배경 레이어 코드 생성기

패럴랙스 이동량은 계수로 결정된다

계산 방식

한계와 접근성

자주 묻는 질문

관련된 도구

z-index 레이어 시스템 설계 가이드

CSS 다중 배경 레이어 코드 생성기

패럴랙스 이동량은 계수로 결정된다

계산 방식

한계와 접근성

자주 묻는 질문

같은 카테고리 도구