콘텐츠
- 01. 모바일 친화적으로 만들기
- 02. 그것을 위해 그것을 사용하지 마십시오
- 03. 재미있게
- 04. 스토리 텔링
- 05. 매력적으로 만들기
- 06. 클릭 유도 문안 활용
- 07. 레이어링 및 깊이 추가
- 08. 과용하지 마세요
- 09. IE 기억
- 10. 자산 사전로드
- 마음에 드 셨나요? 읽어보세요!
'시차'라는 용어는 다른 위치에서 볼 때 물체의 명백한 움직임을 나타냅니다. 이 기술은 원래 배경 이미지가 전경 이미지보다 느리게 움직이는 2D 비디오 게임에서 사용되어 깊이있는 환상을 만듭니다. 1982 년 아케이드 게임 Moon Patrol에서 대중화 된 것이 30 년 후 웹 디자인의 주요 트렌드가 될 것이라고 누가 생각했을까요!
시차 웹 사이트는 단순한 2 계층 사이트 이후로 먼 길을 왔습니다. HTML5, CSS3 및 최신 브라우저에는 다중 평면 애니메이션을 사용하고, 새로운 요소를 도입하고, 스크롤을 사용하여 y 축 너머 모션을 만드는 많은 시차 사이트가 있습니다. 익숙하지 않은 경우 시차 스크롤링 웹 사이트의 눈에 띄는 예제를 확인하세요.
시각적으로 인터랙티브 한 걸작 중 하나를 만드는 것은 압도적 일 수 있으므로 올바른 방법으로 시차 스크롤 웹 사이트를 구축하는 데 도움이되는 10 가지 팁이 있습니다.
01. 모바일 친화적으로 만들기
모바일 장치를 통한 인터넷 사용이 증가함에 따라 모바일 우선 및 반응 형 웹 디자인과 같은 디자인 개념이 인기를 얻게 된 것은 놀라운 일이 아닙니다.
현재, 대부분의 시차 스크롤링 웹 사이트는 위에 묘사 된 푸조 그래픽 소설과 같은 거물들을 포함하여 모바일 장치 친화적이지 않습니다. 그러나 모바일 웹 사용 추세를 감안할 때 이러한 접근 방식은 점점 더 어려워지고 있습니다.
02. 그것을 위해 그것을 사용하지 마십시오
패럴 랙스 스크롤링은 매우 멋진 기술이지만 그것을 위해 사용하지 마십시오. 위에 표시된 Green Splash Design의 사이트는 잘 디자인되어 있고 그 목적을 완벽하게 충족하지만 시차 스크롤링을 사용한다고해서 사용자 경험이 크게 향상되지는 않습니다.
03. 재미있게
청중은 재미를 좋아하고 시차 스크롤은 종종 사용자에게 재미를주기 위해 사용됩니다. 사용자가 아래로 스크롤 할 때 주어진 모델의 의상이 변경되는 Kystalrae Fall Collection은이 기술을 재미있게 사용한 좋은 예입니다.
04. 스토리 텔링
시차 스크롤링은 방문자를 타임 라인이나 스토리를 통해 여행하는 데 사용할 수 있습니다. 디지털 에이전시 inTacto의 사이트는 회사의 역사를 재미 있고 흥미롭게 설명하는 데 사용되는 시차 스크롤링의 좋은 예입니다.
05. 매력적으로 만들기
Activate Drinks 웹 사이트는 애니메이션과 시차 스크롤링을 현명하게 사용하여 청중을 사로 잡습니다. 웹 사이트에서 사용자를 유지하는 것은 항상 디자이너에게 어려운 일이었습니다. 하지만 시차 스크롤링은 시각적 효과가 재미 있고, 유혹적이며, 최 면적이라면 자연스러운 호기심을 끌어낼 수 있습니다.
06. 클릭 유도 문안 활용
우리는 스크롤하고 뭔가 일어납니다. 시차 스크롤링 웹 사이트와 상호 작용할 때 즉각적인 피드백을 활용하는 것은 사람들을 사이트로 끌어 들이고 클릭 유도 문안으로 유도 할 수있는 좋은 방법입니다.
예를 들어 Tinke 피트니스 가젯 웹 사이트는 시차 스크롤과 상호 작용하는 가젯 이미지를 사용하여 방문자를 '다음 버튼'호출로 유도합니다. 웹 사이트는 또한 방문자를 페이지 하단의 '지금 쇼핑하기'클릭 유도 문안으로 완벽하게 안내합니다.
07. 레이어링 및 깊이 추가
Madwell의 자체 사이트는 시차 스크롤링 사이트에 레이어와 깊이를 완벽하게 사용하는 것을 보여 주므로 정당한 이유로 오늘의 사이트로 선정되었습니다. 느리게 움직이는 선명한 배경 이미지에 비해 빠르게 움직이는 흐릿한 전경 이미지를 확인하십시오.
앞서 언급했듯이 시차의 기술은 깊이의 환상을 만드는 것입니다. 포기하지 말고 실험하는 것을 잊지 마십시오!
08. 과용하지 마세요
Muffi는 모든 종류의 공상으로 웹 사이트를 폭격했으며, 기술력과 아름다운 이미지를 인상적으로 보여줍니다. 그러나 개인적으로 시차 스크롤링을 사용하는 데 너무 많이 갔다고 생각합니다. 회사 로고를 찾고 웹 사이트의 내용을 정확히 이해하기가 어려워지면 기술 남용 가능성에 대해 의문을 제기해야합니다.
09. IE 기억
웹 개발자가 브라우저 간 테스트를 수행하는 것은 매우 일반적인 관행입니다. 시차 스크롤 웹 사이트에서는 HTML5 및 CSS3를 사용할 가능성이 높기 때문에 특히 중요합니다. HTML5 Boilerplate cam은 Internet Explorer에 대한 수정 사항이 포함 된 대부분의 브라우저 간 정규화를 관리하는 데 도움이됩니다.
10. 자산 사전로드
많은 양의 시차 스크롤 웹 사이트는 이미지를 많이 사용합니다. 종종 다른 멀티미디어 자산의 사용이 시차 스크롤링 사이트에서 대량 다운로드의 원인이 될 수 있습니다. Soulreaper 만화는 이것의 대표적인 예이며 이미지와 자산을 미리로드하는 좋은 예이기도합니다.
말: 조쉬 찬
Josh Chan은 호주 멜버른에있는 웹 디자인 및 온라인 마케팅 대행사 인 Chromatix의 디지털 전문가입니다. 웹 디자인과 웹 혁신은 여가 시간에 브레이크 댄스와 함께 그의 열정입니다.
마음에 드 셨나요? 읽어보세요!
- 앱 구축 방법
- 화려한 Wordpress 튜토리얼 선택
- 증강 현실의 다음 단계 알아보기
시차 스크롤링의 좋은 예를 보셨습니까? 댓글로 알려주세요!
