본문 바로가기

웹디자인/홈페이지

풀페이지 패럴랙스 코딩

안녕하세요. #토브입니다.



"Parallax 페이지" 들어보셨나요?


보안상의 문제점이 많은 플래시 사용이 점점 줄어들고 있고,

모바일기기에서 플래시는 거의 사라지고 있습니다.


플래시로 구현되었던 각종 애니메이션 효과들은 웹 기술의 발달로

CSS3와 HTML5, 그리고 자바스크립트를 이용하여 대체되고 있는 추세입니다.



저희 #토브에서 이번에 클라이언트의 의뢰로 제작한 페이지 역시,

이런 플래시를 대체하는 기술들을 사용하여 구현하였는데요.


앞서 말씀드린, Parallax, 사전적 의미로 '시차'를 의미하는 패럴랙스 페이지 역시, 최근 외국 사이트들을 기반으로 많이들 제작하고 있는 추세입니다.


이미지들을 분리하여, 시차를 이용하여, 공간감을 표현하고,

여기에, 풀페이지로 제작하여, 마치 예전 플래시를 보는듯한, 한편의 애니메이션을 보는듯한 페이지 효과를 주어 제작을 하였습니다.





클라이언트께서 보내주신 평면적인 시안을





저희 #토브에서 이미지를 각각 분리시키고, 공간감을 표현하였고,

CSS3를 이용하여, 각 종 애니메이션 효과를 적용하였습니다.


열기구의 경우, 특징을 잘 살려 움직임을 표현하였네요~


물론, 플래시나 별도의 프로그램을 설치하는 것이 아닌,

어떤 브라우저에서도 동작할 수 있도록 코딩을 하였습니다~


GIF 형식의 예제는 화질이 깨지고, 잘 안보이네요 ㅜㅜ


그럼 영상으로 한번 보실까요?





제작된 페이지의 영상 샘플을 한번 보셨나요?


화면은 풀페이지 형식으로 제작하여, 자연스러운 스크롤과 유저의 편의성을 제공하도록 구현했습니다.


페이지 섹션별로 이미지들에 맞는 효과를 주어, 더욱 재미있는 웹페이지를 구현하였습니다.




실제 페이지 보러 가기




이상,


이벤트페이지, 개별페이지, 단순하지만 임팩트 있는 홈페이지 등,


최근 트렌드에 맞게 고객님이 상상하시는 그 이상의 결과물로 보답해 드리기 위해 노력하는 #토브였습니다~