콘텐츠
- 13 개의 멋진 시차 스크롤링 웹 사이트
- 01. 웹 디자인 미술사
- 02. Qode 인터랙티브 카탈로그
- 03. 운하
- 04. The Goonies 이야기
- 05. 도그 스튜디오
- 06. 토이 파이트
- 07. 디젤 : BAD 가이드
- 08. 파이어 워치
- 13. 눈이 내리다
시차 스크롤링은 계속 진행되는 웹 디자인 트렌드 중 하나이며이를 사용하여 화려한 효과를내는 사이트가 있습니다. 이 기술은 사용자가 스크롤 할 때 전경보다 느린 속도로 이동하도록 웹 사이트 레이아웃의 배경을 디자인하여 3D와 같은 효과를 만듭니다.
드물게 사용되는 시차 스크롤링은 전경을 돋보이게 만드는 미묘한 깊이 요소를 추가 할 수 있습니다. 어떤 경우에는 큰 시각적 효과를 위해 쇼의 주요 스타로 사용됩니다. 아래의 예는 독특하고 기억에 남는 웹 사이트를 만들기 위해이 기술을 다양한 수준으로 사용하는 방법을 보여줍니다.
웹 디자인에 대한 자세한 내용은 디자인 작업에 도움이되는 최고의 웹 디자인 도구 및 최고의 와이어 프레임 도구에 대한 가이드를 확인하세요. 배를 밀어 내고 싶다면,이 인상적인 CSS 애니메이션 예제는 웹 사이트를 군중들로부터 돋보이게 만드는 또 다른 좋은 방법을 보여줍니다. 단순하게 유지하고 싶으십니까? 웹 사이트 빌더가 필요합니다. 지금은 시차 스크롤링이 어떻게 수행되어야하는지 보여주는 13 개의 사이트가 있습니다.
13 개의 멋진 시차 스크롤링 웹 사이트
01. 웹 디자인 미술사
예술의 역사와 웹 디자인의 역사는 반드시 합쳐야 할 두 가지 주제가 아니라 매혹적인 사이트 웹 디자인 예술 역사에 아름답게 결합되어 웹 디자인이 예술의 한 형태로 자리 잡게합니다.
이 사이트는 페이지를 아래로 스크롤 할 때 끊임없는 놀라움과 즐거움을 제공하기 위해 모든 범위의 시차 스크롤 기술을 사용하여 예술의 역사를 살펴봄으로써 웹 디자인의 역사와 미래를 추적합니다. 다양한 기술이 계속 나오지만 모두 목적을 이루며 시청자가 전체적으로 내러티브에 참여하도록합니다. 흥미로운 예에 대한 다양한 링크가있는이 사이트는 탐색하고 소화하는 데 시간을 할애 할 가치가있는 사이트입니다.
02. Qode 인터랙티브 카탈로그
Qode Interactive Catalog는 인트로의 시차 스크롤로 시작됩니다. 그 뒤로 스크롤하면 각 WordPress 테마 이름을 스크롤 할 때 이미지를 표시하는 양식화 된 메뉴가 나타납니다. 각 테마의 이름을 클릭하면 디자인 가능성을 보여주는 예제 애플리케이션의 스크롤링 포트폴리오로 이동합니다.
이 목록에서 가장 획기적인 시차 스크롤 사용은 아니지만이 기술을 명확한 목적으로 사용하고 사용자 경험을 향상시키는 방법을 보여줍니다. 시차 스크롤링을 통해 Qode는 영향을 미치는 방식으로 각 테마에 대한 다양한 애플리케이션을 효율적으로 보여줍니다. 애니메이션의 산란도이 사이트에 좋은 효과를주기 위해 사용됩니다.
03. 운하
Marcus Brown이 설계하고 Aristide Benoist가 개발 한 Canals는 17 세기에 지어진 암스테르담 운하의 창조와 역사를 통해 400 년의 여정을 떠납니다. 이 사이트는 무성하게 생산 된 커피 테이블 볼륨을 통해 잎을 파는 것과 비슷한 편집 스타일의 경험을 제공하도록 설계되었습니다. 부드러운 수평 스크롤은 시차를 잘 활용하여 스토리의 새로운 섹션마다주의를 끌고 사이트에 미묘한 깊이 감을 부여합니다.
04. The Goonies 이야기
특정 연령의 누구나 80 년대 청소년 모험 영화 The Goonies의 팬이 될 수 있습니다. 그게 당신이라면이 사이트는 향수를 불러 일으킬 것입니다. WebFlow를 사용하여 Joseph Berry가 만든 The Story of The Goonies는 레트로 클래식에 대한 애정 어린 찬사입니다. 시차 스크롤링을 사용하여 시청자를 스토리로 끌어 들이고 캐릭터를 소개하고 영화에 대해 더 많이 공개합니다.
05. 도그 스튜디오
Dogstudio 웹 사이트의 주요 매력은 아름다운 애니메이션 3D 개입니다. 아니면 늑대인가요? – 페이지 중앙. 시차 페이지를 아래로 스크롤하면 움직이는 송곳니가 크기가 조정되고 회전합니다. Dogstudio의 최근 프로젝트 제목 위로 마우스를 가져 가면 조명 색상이 변경됩니다. 아마도 우리가 가장 좋아하는 터치는 한 지점에서 개가 페이지 사본의 일부 앞에서 회전하여 텍스트의 일부를 가리고 추가 깊이를 생성한다는 것입니다. 매우 부드러운 프레젠테이션입니다.
06. 토이 파이트
수상 경력에 빛나는 크리에이티브 에이전시 인 ToyFight는 웹 사이트를 통해 많은 즐거움을 선사합니다. 설립자 Jonny Lander와 Leigh Whipday는 사이트 전체에서 다양한 상황에서 등장하는 3D 인물로 변신 한 것으로 보입니다 (위의 건방진 Sagmeister & Walsh 참조 포함). 시차 스크롤링의 현명한 사용은 압도적이거나 짜증나 지 않고 사이트의 3D 효과를 증폭시킵니다. 대담하고 평범한 배경과 함께 대행사의 매력적인 프레젠테이션을 제공합니다.
07. 디젤 : BAD 가이드
이 한 페이지 사이트는 디젤의 남성용 BAD 향수 출시를 위해 개발되었습니다. 84.Paris가 디자인 한이 제품은 소셜 미디어 캠페인과 함께 제공되는 'BAD Guide'를 구성하는 일련의 규칙을 제시합니다.
사용자는 클릭 할 이미지의 핀 보드처럼 배치 된 시차 페이지 주위로 마우스를 드래그하여 탐색 할 수 있습니다. Tinder ( '오른쪽, 오른쪽, 오른쪽, 오른쪽으로 스 와이프-나중에 분류 할 것입니다.')부터 Instagram ( '목요일에 전 애인과 연락하는 것을 잊지 마세요 #TBT')에 이르는 모든 것에 대한 조언이 있습니다. 흑백 삽화.
08. 파이어 워치
위의 GitHub 404 페이지와 마찬가지로 이것은 정확하게 시차 스크롤링이 아니지만 마우스 흔들기에 의해 트리거되는 플로팅 레이어를 사용하면 뉴욕의 디자인 및 개발 대행사 인 Madwell 사이트에서 기억에 남는 3D 스타일을 만들기 위해 엄청난 깊이가 추가됩니다.
13. 눈이 내리다
New York Times의 또 다른 기사 인 Snow Fall은 시차 스크롤링과 웹 비디오를 포함한 다양한 리소스를 결합하여 Tunnel Creek의 눈사태 공포 이야기를 들려줍니다.
2012 년 12 월에 온라인으로 게시되었지만 시차 스크롤링으로 할 수있는 작업의 예로서 여전히 강력합니다. 이 신문은 퓰리처 수상작을 혁신적인 방식으로 전 세계 디자인 커뮤니티의 관심을 사로 잡았으며 온라인에서 긴 형식의 편집 콘텐츠로 할 수있는 일의 경계를 넓힌 최초의 신문 사이트 중 하나로 만들었습니다.
