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

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

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

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

웹 디자인 미술사

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

여기에는 다양한 시차 스크롤 기술이있어 사용자가 끊임없이 놀라고 기뻐합니다. 페이지를 아래로 스크롤합니다. 이것은 약간의 시간을 들여 살펴볼 가치가 있습니다.

Qode 대화 형 카탈로그

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

운하는

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

The Goonies 이야기

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

Dogstudio

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

ToyFight

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

Diesel : BAD Guide

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

사용자는 클릭 할 이미지의 핀 보드처럼 배치 된 시차 페이지 주위로 마우스를 드래그하여 탐색 할 수 있습니다. Tinder의 모든 것에 대한 조언이 있습니다 ( “오른쪽, 오른쪽, 오른쪽, 오른쪽으로 스 와이프 – 당신은 그들을 정렬합니다” out later “) 인스 타 그램 (“목요일 #TBT에 전 애인과 연락하는 것을 잊지 마세요. #TBT “), 흑백 삽화와 함께.

Firewatch

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

GitHub 404

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

Jess & Russ

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

돈을 중요하게 만드세요

금융과 돈은 가장 흥미로운 주제가 아닙니다. 그러나 뉴욕에 기반을 둔 디지털 대행사 인 Firstborn은이 역동적 인 시차 스크롤 웹 사이트 인 Make Your Money Matter for the Public Service Credit Union을 사용하고 있습니다.

대중에게 신용 조합 가입의 이점을 가르치기 위해, 은행을 사용하는 대신이 멋진 사이트에는 신용 조합이 어떻게 작동하는지, 어디서 찾을 수 있는지, 신청하는 방법에 이르기까지 모든 것이 포함되어 있으며 은행이 고객의 예금에서 얼마나 많은 이익을 얻는 지 보여주는 계산기가 있습니다.

Madwell

뉴욕에 본사를 둔 디자인 및 개발 대행사 인 Madwell은 다양한 시차 스크롤 효과를 사용하여 포트폴리오를 선보여 눈에 띄는 3D 스타일을 만들어

New York Times : Tomato Can Blues

낮은 관심 범위와 한입 크기의 미디어 시대에 사람들을 긴 형식의 저널리즘으로 끌어들이는 방법은 무엇입니까? Tomato Can Blues는 Atilla Futaki가 만든 스토리 텔링 및 만화에서 영감을받은 일러스트레이션과 영리한 웹 디자인 기술을 결합한 New York Times의 문제에 대한 훌륭한 응답입니다.

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

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

눈 가을

온라인에서 장편 편집 콘텐츠로 할 수있는 일의 한계를 뛰어 넘는 New York Times의 Snow Fall 기사는 시차 스크롤링과 웹 비디오를 포함한 다양한 요소를 결합합니다.

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

• 19 정말 유용한 반응 형 웹 디자인 자습서
• 최고의 외장 하드 드라이브
• 멋지게 디자인 된 404 오류 페이지