패럴랙스 스크롤링

위키백과, 우리 모두의 백과사전.

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

샘플[편집]

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

같이 보기[편집]

활용 사례[편집]