패럴럭스 스크롤링

위키백과, 우리 모두의 백과사전.
둘러보기로 가기 검색하러 가기

패럴럭스 스크롤링(parallax scrolling)은 사용자가 마우스를 스크롤할 때, 원거리에 있는 배경 이미지는 느리게 움직이게 하고, 근거리에 있는 사물 이미지는 빠르게 움직이도록 함으로써 입체감을 느낄 수 있게 만든 디자인 기법이다. 하나의 이미지를 여러 개의 레이어(layer)로 분리한 후 스크롤에 반응하는 속도를 다르게 조정하는 방식으로 구현한다. 1930년대부터 애니메이션 분야에 사용되던 기법이었으나, 웹 디자인 분야는 HTML5CSS3 기법이 도입됨으로써 사용이 가능해졌다.

샘플[편집]

아래 애니메이션은 3개의 레이어로 구성되어 있으며, 각 레이어가 왼쪽 방향으로 움직이는 속도에 차이가 있다. 맨 앞에 있는 레이어는 중간에 있는 레이어보다 8배 빠르게 움직이고 있고, 중간 레이어는 구름이 있는 배경 레이어보다 2배 빠르게 움직인다.

활용 사례[편집]