최근 바뀜 사이트맵

사이트 도구

패럴랙스_스크롤링_parallax_scrolling

패럴랙스 스크롤링(Parallax scrolling)

정의

패럴랙스 스크롤링(Parallax )은 배경 이미지가 전경 이미지보다 천천히 움직이게 하여 2D의 평면적인 화면에 깊이의 착시 현상과 함께 입체감 혹은 몰입감(immersion)을 만들어내는 컴퓨터 그래픽과 웹디자인의 기술이다. 이 기술은 1930년대 전통적인 애니메이션에서 제일 처음 사용되었으며, 1980년대 비디오 게임 중 아케이드 게임에 널리 활용되었다. 웹에서는 HTML5와 CSS3 기술이 표준으로 정립되면서 본격적으로 도입되었다.

구현

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

배경 이미지중간 이미지전경 이미지완성된 이미지
패럴랙스_스크롤링_parallax_scrolling.txt · 마지막으로 수정됨: 2018/07/01 23:54 저자 baobab