Parallax Scroll Experiment

스크롤만으로 어떻게 웹사이트에 깊이감과 생동감을 줄 수 있는지 궁금해서, 바닐라 자바스크립트(Vanilla JS)와 CSS만으로 직접 Parallax 효과를 실험해 보았습니다.

가장 먼저 스크롤 위치(scrollY) 값을 받아와, 배경, 중간, 전경에 해당하는 각 이미지 레이어의 transform: translateY() 값을 다르게 조절하는 방식으로 접근했습니다. 각 레이어의 이동 속도에 차이를 두면서 입체감이 어떻게 변하는지 관찰하는 과정 자체가 재미있었습니다.

단순히 스크롤 이벤트에만 의존하면 애니메이션이 끊겨 보일 수 있다는 걸 알게 됐고, 이를 해결하기 위해 requestAnimationFrame을 사용해 브라우저 렌더링 주기에 맞춰 부드럽게 움직이도록 개선했습니다. 또한, 화면에 보일 때만 애니메이션이 동작하도록 IntersectionObserver를 적용해보거나 translateZ(0) 트릭으로 GPU 가속을 활성화하는 등, 성능 최적화 방법들도 함께 탐구해 보았습니다.

이번 실험을 통해 스크롤 기반 애니메이션의 기본 원리와 성능 최적화의 중요성을 직접 체감할 수 있었습니다.