웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



WEBDESK
Design Inspiration
HOME WEBDESK Design Inspiration
3D효과내는 패럴렉스 스크롤링 웹사이트 20
Posted by kimdirector | 2014.09.11 | Hit : 4009
패럴렉스 스크롤 웹디자인 CSS HTML 웹사이트
목록보기이전보기
웹디자인의 신선한 트렌드인 패럴렉스 스크롤링. 패럴렉스 스크롤링은 배경 이미지가 전경 이미지와 느린 속도로 교차 되어 시간차로 움직이는 컴퓨터 그래픽이라고 규정지을 수 있다. 웹사이트 페이지의 스크롤을 내리면서 3D효과를 만든다. 이 효과는 웹사이트의 깊이 있는 요소를 추가하여 멋진 경험을 선사해준다.  최근 몇 년간, 이 패럴렉스 스크롤링이란 기술은 창의성이 제한되어진 웹디자이너들에게 인기를 끌고 있다. 실제로 CSS및 HTML(HTML5 및 CSS3)의 최신 버전의 출현과 함께 연습이 시작되었다.
 
지금부터 멋진 컨셉의 패럴렉스 스크롤링 웹사이트 베스트 20을 소개한다.
(제목과 사진을 클릭하시면 해당 사이트로 링크됩니다.)

 
Unfold
노르웨이의 오슬로에서 유명한 디지털 에이전시이다.  언폴드(Unfold)는 다양한 요소를 전시한 웹사이트를 디자인했다. 무한 스크롤 효과를 하나의 페이지 패럴렉스 테마로 사용하였다. 이  방법은 여러 요소를 혼합하여 놀라움을 주는 완벽한 예가 된다.
 

The Beast
이 웹사이트는 포크가수 Laura Marling의 앨범을 기반으로 한 사이트이다. 데이터의 속성과 새로운 요소를 광범위하게 사용한다. 애니메이션의 신호는 오디오의 신호와 함께 같은 속도로 시작한다. 단락이 다 읽혀지고 나면 화면의 장면이 전환되며, 패럴렉스 효과의 방향과 속도는 일정하게 자동으로 컨트롤된다.
 

Madwell
매드웰(Madwell)은 미국 뉴욕의 개발 및 디자인 에이전시이다.  이 홈페이지는 패럴렉스 스크롤 효과로 포트폴리오를 보여준다. 이러한 효과는 주목할만한 3D스타일을 선보일 수 있으며, 이것이 금액적으로도 깊이있는 가치를 가졌다는 의미가 내포되어있다.
 

TokioLab
일반적으로 웹디자이너는 패럴렉스 이펙트를 가지고  3D에 대한 환상을 만들어낸다. 하지만 이 웹사이트의 패럴렉스 포트폴리오는  그 룰을 부수는 선두에 서기 때문에  주목하지 않을 수 없는 사이트이다.
 

Activate Drinks
이 회사는 비타민이 들어간 음료를 소개하며 이 이야기 내내 탄산의 거품효과를 전경, 중간과 바탕화면에 배치하여 3D 효과를 주었다.
 

Oakeley
오클리(Oakeley)는 아이웨어 소매업에서 성공한 웹사이트이다. ‘에어 브레이크 MX 고글’이라는 제품을 묘사력이 좋은 퀄리티의 사진과 멋진 스크롤 효과를 믹스하여 꾸몄으며 인상적인 웹사이트를 만들었다.
 

Life of Pi
이 사이트는 ‘라이프 오브 파이’라는 제목의 영화의 공식 사이트이다. 훌륭한 패럴렉스 효과로, 관객에게 영감을 주기 위한 목적으로 파이의 여행을 말하고 있다.
 

Q Music Titanic
이 사이트는 멋진 패럴렉스 이펙트를 가진 사이트의 훌륭한 예시 중 하나이다. 패럴렉스 효과를 가지고 타이타닉 크루즈에 대한 사실과 수치를 알려주는 흥미로운 사이트이다.
 

Shape
쉐입(Shape)이라는 에이전시는 그들의 디자인 프로세스을 패럴렉스 스크롤링으로 표현하였다. 시각적 터치를 추가한 애니메이션으로 전체적 흐름을 설명한다.
 

5emegauche
일반적으로 스크롤을 하면 다른 페이지로 이동하지만, 이 에이전시 웹사이트는  이례적이다. 모든 것들의 재미를 위하여 스크롤 요소 또는 장치 조각을 렌더링한다. 패럴렉스 디자인의 아이디어에 기술을 얹어서  창의적인 결과를 만들어냈다.
 

Bagigia
배기기아(Bagigia)는 독보적인 스크롤링 효과를 가진 사이트이다. 스크롤링을 통해  환상적으로 제품의 특징을 선보인다. 이 사이트는 스크롤링 효과의 완벽한 예시가 된다.
 

Erosbalazs
하나의 화살표의 도움으로 시각적으로 독특한 패럴렉스 효과의 사이트라고 할 수 있다.
 

Green Man
이 그린맨(Green Man)은 방문자에게 애니메이션의 세계를 보여주고 있는, 귀여운 예시의 패럴렉스 스크롤 사이트이다.  이 사이트는 단순하지만 매력적인 패럴렉스 효과를 가지고 있다.
광고의 세계는 언제나 창의력과 연결되어 있다. 스크롤 효과와 함께, 웹사이트가 잇달아 영화를 보는 경험을 느끼게 해줄 것입니다.
 

inTacto
이 웹사이트의 패럴렉스 효과는 굉장히 매력적이다. 화면이 줄어들고, 늘어남에 따라 바뀌는 그래픽 또한 무척이나 인상적이다.  인사말 카드를 기반으로 방문자들의 주목을 끌고 있다.
 

Jan Ploch
이 웹사이트는 간단하고 다소 담백한 방식으로 디자인 되었지만 방문자들을 사로잡기 위한 본질적인 항목들을 가지고 있다.
 

Jason Kenny OBE
이 멋진 웹사이트는 영국의 올림픽 트랙 사이클 선수인 케니를 위해 제작되었다.  원페이지 사이트로, 패럴렉스 효과를 제대로 활용하였다.
 

Reverend Danger
이 디지털 에이전시의 웹사이트는 상호적인 디자인과 패럴렉스 효과를 완벽하게 선보이고 있다.
 

fishy
이 웹사이트는 콘텐츠, 그래픽과 눈길을 끄는 스크롤 효과를 포함하여 모든 요소가 충실한 웹사이트이다.
 

La Moulade
뛰어난 움직임과 애니메이션을 가진 사이트인 프랑스 디자인 에이전시 라 뮬라드(la moulade)는 뛰어난 탐색 위젯을 선보인다.

 
국내 사이트 중에서 패럴렉스 스크롤 효과를 적용한 사이트는?
 

매경e신문 ‘대한민국 1번가 내이름은 당대불패’
경주마에 대한 특집 웹사이트로 패럴렉스 스크롤 효과에 동영상을 적용한 사이트이다. 풀스크린 영상이 자동 재생되며 방송을 보는듯한 역동적인 느낌을 준다.
 

네이버 ‘라인 플레이’
아바타 꾸미기를 컨셉으로 모델은 화면에 고정되어 있고 스크롤을 할수록 옷이 바뀌어 종이인형을 가지고 노는 느낌을 주었다. 효과를 많이 사용하지 않아도 컨셉을 잘 살리고 있다.
 

보너스~!
이렇게 멋진  패럴렉스 스크롤 효과를 만들고 싶다면? 어도비 뮤즈( Adobe Muse)로 쉽게 만들 수 있다. (다운로드받기) 코딩 없이 디자인만으로 HTML5 웹사이트를  만드는 소프트웨어로 다양한 스크롤 효과 옵션이 설정되어 있어서 디자이너들도 쉽게  패럴렉스 스크롤 효과를 만들 수 있다. 뮤즈 웹사이트도 이 효과가 적용되어 있으며, 스크롤 효과를 만드는 강좌도 잘 정리되어 있다.
 
지금까지 패럴렉스 스크롤 효과의 이상적인 예를 보여주는 사이트들을 소개했다.  모두 다른 스크롤 효과와 자신만의 독특한 방식이 합쳐져서 웹사이트에 적용하는 게 최상의 선택이라는 것을 보여준다. 만약 여러분이 본인의 사이트에 패럴렉스 스크롤 효과를 넣고 싶다면 우선 이 사이트들에서 아이디어와 영감을 얻길 바란다.
 
이 외에도 패럴렉스 스크롤 효과가 적용된 멋진 사이트가 있다면 댓글로 남겨 주세요~
< 저작권자 ⓒ 트렌드와칭(http://trendw.kr) 무단 전재 및 재배포 금지 >
 

패럴렉스 스크롤링에 대한 개념을 알고 있으시면 아래 제목을 선택하세요.
▶ 패럴렉스 스크롤로 본 웹 화면에 대한 고찰
 
Posted by kimdirector | 2014.09.11 | Hit : 4009
LINK http://trendw.kr/design/201402/11057.t1m
TAG 패럴렉스 스크롤 웹디자인 CSS HTML 웹사이트
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=DesignInspiration&no=56

COMMENT
kimdirector
2014.09.11 11:54:51 X
본 내용은 올해 2월에 포스팅된 내용이오니 참고하시기 바래요.
목록보기 이전보기

WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Best View Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
무료이미지 무료 소프트웨어 UX UX 솔루션 inspiration 아이콘 로고 IT world 웹디자인 홈페이지 반응형웹 모바일 다빈치 애니메이터 기획자 CSS CIP 성공 쇼핑몰 리더십 디자인 메일폼 웹사이트 모니터 레시피 활용팁 기업 웹 사이트 브랜드 데이터 App 애플리케이션 웹기획 CIO 스마트워치 창의력 iOS 7 모바일 디자인 도구 웹디자이너 그래픽디자인