Codepen에서 CSS로 만든 작품들을 보던 중, 우연히 내 눈을 사로잡은 것이 있었다.
스크롤링을 할 때 일반적으로 되는 게 아니라, 마치 입체감이 있게 보이는 것이었다. 그것을 "Parallax Scrolling"라고 하는 것을 처음 알게 되었다.
Parallax란?
두산백과에 따르면 "관측자가 어떤 천체를 동시에 두 지점에서 보았을 때 생기는 방향의 차"라고 요약해서 설명하고 있다. 원래는 과학, 특히 천문학에서 쓰이는 말이다.
멀리 있는 물체와 가까이 있는 물체가 있고, 그것을 나란히 포개서 보았을 때, 시선을 움직이게 되면 가까이 있는 물체는 빠르게 움직이는 것처럼 보이고, 멀리 있는 물체는 천천히 움직이는 것처럼 보인다. 그러면서 공간감을 느끼게 되는 것이다.
이것을 스크롤링에서도 활용한 것이 바로 Parallax Scrolling이다.
독특한 UX를 제공하는 Parallax Scrolling에 더 관심이 생겨서 유튜브도 찾아보았다.
위 영상에서는 11가지 Parallax Scrolling을 소개하고 있는데, 사람들의 창의력을 엿볼 수 있다. Codepen에 가면 소스를 다 볼 수 있다.
영상에서 소개한 것들은 약간 고난이도로 느껴졌는데 마침 생활코딩에서 엄청 간단하게 구현할 수 있는 방법이 강의로 있어서 바로 따라해 보았다.
background-attachment: fixed;
비법은 바로 이것! 이것을 Scene마다 적용해주면 된다.
뒷 배경은 고정되어 있고, 앞에 있는 텍스트는 스크롤링 되도록 설정하는 것이다.
아주 간단한 아이디어지만 이것을 응용하고 좀 더 다양한 요소들을 추가할 수 있다면 더욱 화려하고 재미있는 웹 사이트를 만들 수 있을 것이다.
다음 번에는 조금 더 동적으로 parallax scrolling을 구현해 봐야겠다.