14 개의 놀라운 시차 스크롤링 웹 사이트

시차 스크롤링 : 웹 디자인 및 미술사
(이미지 출처 : 웹 디자인 및 미술사)

시차 스크롤링은 한동안 사용되어 왔지만 계속해서 진행되는 웹 디자인 트렌드 중 하나입니다. 시차 스크롤링은 웹 사이트 레이아웃이 웹 페이지의 배경이 더 느린 속도로 전경으로 이동하는 것을보고 스크롤 할 때 3D 효과를 만드는 것입니다. 드물게 사용하면 멋지고 미묘한 깊이 요소를 제공하여 독특하고 기억에 남는 웹 사이트를 만들 수 있습니다.

어떻게해야하는지 보여주기 위해이 기술을 사용하여 화려한 효과를내는 사이트가 있습니다. 어떤 경우에는 시차 스크롤링이 쇼의 스타입니다. 다른 경우에는 전경이 약간 튀어 나오는 것처럼 보이도록 깊이를 더합니다.

정말 배를 밀어 내고 싶다면이 인상적인 CSS 애니메이션 예제는 웹 사이트를 군중에서 돋보이게 만드는 또 다른 좋은 방법을 보여줍니다. 그리고 당신은 또한 우리의 최고를 확인할 수 있습니다 웹 디자인 도구 디자인 노력에 도움이 될 것입니다. 하지만 지금은 시차 스크롤링을 매우 올바른 방식으로 사용하는 일부 사이트를 살펴 보겠습니다.



01. 웹 디자인 미술사

시차 스크롤링 : 웹 디자인 및 미술사

일련의 시차 스크롤 효과를 통해 미술사에 대해 알아보기(이미지 출처 : 웹 디자인 및 미술사)

예술과 웹 디자인의 역사는 반드시 합쳐야 할 주제는 아니지만 이것에 아름답게 결합되어 있습니다. 웹 디자인 미술사 시간을 통해 예술을 바라 봄으로써 웹 디자인의 미래를 추적하는 사이트.

여기에는 다양한 시차 스크롤 기술이 있습니다. 즉, 사용자가 페이지를 아래로 스크롤 할 때 끊임없이 놀라고 기뻐합니다. 이것은 탐험하는 데 약간의 시간을 할애 할 가치가 있습니다.

뒤통수 그리는 법

02. Qode 인터랙티브 카탈로그

시차 스크롤

여기에서 제공되는 WordPress 테마를 탐색하려면 계속 스크롤하십시오.(이미지 출처 : The Qode Interactive Catalog)

그만큼 Qode 대화 형 카탈로그 각 항목에 대한 이미지를 표시하는 양식화 된 하단 텍스트 탐색 시스템이 있습니다. 카탈로그를 클릭하면 다양한 WordPress 테마를 보여주는 데 사용되는 수평 시차 스크롤이 표시됩니다. 이 목록에서 시차 스크롤링의 가장 획기적인 사용은 아니지만 그 목적에 잘 부합합니다. 애니메이션의 스패 터링도 좋은 효과를내는 데 사용됩니다.

03. 채널

시차 스크롤링 : 운하

운하는 큰 커피 테이블 책을 훑어 보는 것과 같습니다.(이미지 출처 : 운하)

Marcus Brown이 설계하고 Aristide Benoist가 개발 한 채널 암스테르담 17 세기 운하의 역사를 통해 400 년의 여정을 안내합니다. 이 사이트는 무성한 커피 테이블 볼륨을 훑어 보는 것과 같은 편집 스타일의 경험을 제공하도록 설계되었으며, 시차를 잘 활용하여 스토리의 새로운 섹션에 관심을 끌고 사이트에 미묘한 깊이 효과를 제공합니다.

04. The Goonies 이야기

시차 스크롤링 : The Goonies 이야기

여기에서 달콤한 80 년대 복고풍 히트 곡을 즐겨보세요(이미지 출처 : The Goonies의 이야기)

특정 연령대의 누구나 사랑을 보장받는 80 년대 십대 어드벤처 영화 The Goonies, 그리고 그게 당신이라면이 사이트는 당신의 향수 샘을 욱신 거릴 것입니다. WebFlow를 사용하여 Joseph Berry가 만든 Goonies의 이야기 시차 스크롤링을 사용하여 이야기에 빠져들고 캐릭터를 소개하며 영화에 대한 모드를 공개하는 레트로 클래식에 대한 찬사입니다.

프리랜서 일러스트 레이터가되는 방법

05. 도그 스튜디오

시차 스크롤 : DogStudio

애니메이션 3D doggo는 여기에서 쇼의 스타입니다 [Image : Dogstudio]

즉각적인 초점 Dogstudio 의 사이트는 아름다운 애니메이션 3D 개입니다. 아니면 늑대입니까? – 페이지 중앙에서 시차 페이지 아래로 스크롤 할 때 크기가 조정되고 회전합니다. Dogstudio의 최근 프로젝트 제목 위로 마우스를 가져 가면 조명의 색상이 변경되며, 아마도 우리가 가장 좋아하는 부분은 일부 텍스트가 가려져 페이지 사본의 일부 앞에서 회전 할 때입니다.

06. 토이 파이트

시차 스크롤 : ToyFight

Jonny와 Leigh는 모두 해부학 적으로 정확합니다. [Image : ToyFight]

ToyFight 수상 경력에 빛나는 크리에이티브 에이전시이며 웹 사이트는 정말 재미 있습니다. 설립자 인 Jonny Lander와 Leigh Whipday는 사이트 전체의 다양한 장면에 등장하는 3D 피규어로 변신했습니다 (이 건방진 Sagmeister & Walsh 참조 포함). 시차를 현명하게 사용하면 3D 효과가 증폭되고 대담하고 밝고 평범한 배경과 함께 사용하면 압도적이거나 짜증나 지 않습니다.

07. 디젤 : BAD 가이드

시차 스크롤 : 디젤

Diesel의 BAD Guide는 가상 핀 보드처럼 작동합니다. [Image : Diesel]

84. 파리 디젤의 BAD 향수 출시와 함께이 인상적인 패럴 랙스 웹 사이트 (및 관련 소셜 미디어 캠페인)를 만들었습니다. 한 페이지 사이트는 'BAD 가이드'를 구성하는 일련의 규칙을 제공합니다.

사용자는 클릭 할 이미지의 핀 보드처럼 배치 된 시차 페이지 주위로 마우스를 드래그하여 탐색 할 수 있습니다. Tinder ( '오른쪽, 오른쪽, 오른쪽, 오른쪽으로 스 와이프-나중에 정렬 할 것입니다.')부터 Instagram ( '목요일에 전 애인과 연락하는 것을 잊지 마세요 #TBT')에 이르기까지 모든 것에 대한 조언이 있습니다. 흑백 삽화.

08. 파이어 워치

Firewatch 웹 사이트의 스크린 샷은 새벽에 황금 협곡을 바라 보는 등산객의 그림을 보여줍니다.

나무의 각 층은 독립적으로 움직입니다. [Image : Campo Santo]

우리가 본 시차 스크롤의 가장 아름다운 예 중 하나는이 게임 웹 사이트입니다. Firewatch , 6 개의 움직이는 레이어를 사용하여 깊이 감을 만듭니다. 스크롤 하이재킹 (시차 효과를 자주 수반하는 것)이없고 페이지 상단에서만 사용되기 때문에 훌륭합니다. 나머지 사이트는 여전히 멀미하지 않고 정보를 읽을 수 있습니다. 어떻게 진행되는지 알고 싶다면 여기에 대한 멋진 데모가 있습니다. CodePen .

개 초상화를 그리는 방법

09. GitHub 404

시차 스크롤 : GitHub 스크린 샷

GitHub의 404는 방향 감각 상실 효과에 대한 시차 규칙을 위반합니다. [Image : GitHub]

GitHub의 404 페이지 스크롤이 아닌 마우스 흔들기에서 효과가 발생하므로 엄격하게 시차 스크롤링은 아니지만 레이어를 사용하여 깊이를 추가하는 정말 재미있는 페이지입니다. '적절한'시차와 달리 배경이 전경보다 빠르게 이동하여 방향을 잃고 다른 세상과 같은 느낌을줍니다.

10. Jess & Russ

시차 스크롤링 : 스크린 샷은 밤에 도시의 스카이 라인을 빠르게 날아 다니는 하얀 드레스를 입은 여성의 그림을 보여줍니다.

모든 일러스트에는 깊이 감이 있습니다 [이미지 : Jess & Russ]

디자인 파워 커플 Russ Maschmeyer와 Jessica Hische가 웨딩 웹 사이트 볼만한 아름다움입니다. 이 사이트는 일러스트레이션에 깊이를 더하기 위해 전체적으로 시차 스크롤을 사용하여 낭만적 인 이야기를 차트로 표시합니다. 그들은 2012 년에 결혼했지만 웹 사이트는 여전히 볼만한 가치가 있습니다.

11. 돈을 중요하게 만드십시오

시차 스크롤 웹 사이트의 예 : 돈을 중요하게 만드세요

Make Your Money Matter의 정보와 조언으로 재정을 관리하세요 [이미지 : 공공 서비스 신용 조합]

재정과 돈은 가장 흥미로운 주제가 아닙니다. 하지만 뉴욕에 기반을 둔 디지털 대행사 맏아들 이 동적 시차 스크롤링 웹 사이트에서 당신의 돈을 중요하게 만드십시오 공공 서비스 신용 조합을 위해.

은행을 이용하는 대신 신용 조합 가입의 이점을 대중에게 가르치는 것을 목적으로하는이 멋진 사이트에는 신용 조합의 운영 방식부터 신용 조합을 찾을 수있는 곳, 신청하는 방법에 이르기까지 모든 것이 포함되어 있습니다. 고객의 예금에서 은행이 얼마나 이익을 얻었는지.

12. 매드 웰

시차 스크롤 : Madwell

레고 해리 포터와 아즈카반의 죄수
뉴욕 에이전시 Madwell은 시차 스크롤링을 사용하여 깊이 감을 더합니다. [Image : Madwell]

디자인 및 개발 기관 매드 웰 뉴욕에 본사를 둔는 다양한 시차 스크롤 효과로 포트폴리오를 선보여 엄청난 깊이를 더하는 눈에 띄는 3D 스타일을 만듭니다.

13. 뉴욕 타임즈 : 토마토 캔 블루스

시차 스크롤링 웹 사이트의 예 : New York Times

이 시차 스크롤링 New York Times 기사 [이미지 :]로 아름다운 경험을하게됩니다.

주의력이 낮은 오늘날과 한입 크기의 미디어 시대에 사람들을 긴 형식의 저널리즘으로 끌어들이는 방법은 무엇입니까? 토마토 캔 블루스 New York Times의이 문제에 대한 훌륭한 반응으로, 일부 영리한 웹 디자인 기술과 Atilla Futaki가 만든 스토리 텔링 및 만화에서 영감을받은 일러스트레이션을 결합했습니다.

우리가 본 시차 스크롤링의 가장 좋은 예 중 하나 인이 기사는 Mary Pilon이 쓴 케이지 파이터의 이야기를 안내합니다. 콘텐츠를 스크롤 할 때 일러스트는 영리한 애니메이션과 변경으로 생생하게 표현되어 콘텐츠에 완전히 몰입 할 수 있습니다.

Futaki의 삽화는 경찰 기록, 증인 기록, 사진 및 기자의 메모를 기반으로했으며 세부 사항에 대한 관심이 빛을 발합니다. 대체로 훌륭한 독서 경험입니다. 이것이 온라인 저널리즘의 미래입니까?

14. 눈이 내리다

시차 스크롤링 웹 사이트의 예 : Snow Fall

New York Times의 'Snow Fall'기사는 풍부한 시차 사이트에 대한 완전히 새로운 열풍을 시작했습니다. [Image : New York Times]

긴 형식의 온라인 편집 콘텐츠로 할 수있는 일의 경계를 넓힌 최초의 사이트 중 하나 인 New York Times ' 눈이 내리다 기사는 시차 스크롤링 및 웹 비디오를 포함하여 다양한 요소를 결합합니다.

터널 크릭의 눈사태 공포에 관한 기사는 2012 년 12 월에 온라인으로 게시되었지만 시차 스크롤로 할 수있는 작업의 예로서 여전히 강력합니다. 이 신문은 퓰리처 수상작을 혁신적인 방식으로 전 세계 디자인 커뮤니티의 관심을 사로 잡았습니다.

관련 기사: