parallax 1



두 가지 방식의 패럴랙스

패럴랙스(parallax)는 크게 두 가지 방식이 있습니다. 백그라운드 이미지가 바뀌는 느낌과 이미지들 사이에 속도가 다르게 설정하는 것입니다. 두 개의 이미지가 시각적으로 맞닿는 경계에서 미묘하게 변화하는 효과를 응용한 것이지요. 이미지들의 레이어가 겹치고, 깊이가 있고, 부유하고 떠다니는 장면을 통해 보다 역동적인 감성을 생성할 수 있습니다.

가장 중요한 팁

background-attachment라는 css옵션을 사용해서 백그라운드가 정지하거나, 혹은 스크롤을 따라 움직이는 것을 설정할 수 있습니다. fixed는 고정된 배경, scroll은 움직이는 배경을 만듭니다. 이 속성을 통해 우리는 하나의 영역을 마치 창문처럼 피사체를 엿보는 시각으로 바꾸어낼 수 있는 것입니다.

또다른 팁들

background-size:cover로 간편하게 백그라운드 사이즈를 적절하게 나오도록 세팅할 수 있다는 것을 알아두세요. 또한 이미지의 느낌이 서로 대비가 되어야 다양한 느낌을 줄 수 있습니다. 한 번은 밝고 오브젝트가 강조되는 이미지라면, 그 다음은 어둡고 풍경이 서로 다른 이질감을 줄 수 있겠지요.

패럴랙스의 장점과 단점

패럴랙스의 또 하나의 장점은 여러장의 이미지를 커다랗게 슬라이드쇼의 느낌으로 보여줄 수 있다는 것입니다. 만약 포트폴리오 이미지를 패럴랙스를 통해 자신의 이야기처럼 보여줄 수도 있겠지요. 사람들이 일반적으로 보는 경험을 살짝 비틀어 보여줄 때, 보다 새로운 시각적 경험을 기대할 수 있습니다. 다만 전체 이미지의 일부분만이 창문처럼 보이기 때문에 이미지의 구석구석을 살펴볼 필요가 있는 이미지는 패럴랙스와는 맞지 않습니다.

패럴랙스, 너 참 좋다.