웹사이트 디자인: 시차를 스크롤 하는 무엇? 시차의 디자인 가이드

중간 거래 SEO 진단 Taobao 게스트 클라우드 호스트 기술 홀

미래에 핫 트렌드 중 하나로 웹 디자인, "시차 롤링" 채택 되었습니다 점점 더 많은 웹사이트에 의해 최근 몇 년 동안, 그리고 특별 한 새로운 디스플레이 모드는 또한 했다 많은 사용자가 밝은. 네트워크에 또한 생겨나고 "흥미로운 시차 스크롤 웹사이트 30" 처럼 많은 "60 시차 스크롤 웹사이트 감사"... 그리고 시차 스크롤 기사, 하지만 감사의 대부분의 시리즈, 진짜 가이드 디자이너 디자인 하는 방법, 실용적인 문서를 구현 하는 방법을 거의 이다. 그래서 회전 검사를 공유 하는 아이디어, 그리고 관심 있는 사람 그들의 자신의 쓰기의 발 아 디자인 경험의 일부.

스크롤 시차는 무엇입니까?

패 럴 랙 스 (시차 스크롤) 스크롤 형태 3 차원 모션 효과, 아주 좋은 시각적인 경험을 데 려 다른 속도로 이동 하려면 레이어 배경 수를 말합니다.

시차 효과, 원래는 천문 용어, 우리 별, 우리 미국 근처 별 빠른 이동 속도, 이동 거리 별 볼 때. 때 우리는 차에 앉아서 창 밖, 또한 먼 산 움직이는 것 같지 않다 고 인근 논 빨리 비행 하는 느낌이입니다. 많은 게임 시차 효과 사용 하 여 현장에 증가. 그러나 간단한 포인트 변경,, 결과 페이지 요소에 다양 한 자세의 속도 있는 변화의 다른 요소 위치는 환상, 그리고 우리의 인간의 눈 효과의 레이어 때 스크롤 화면에서 페이지의 요소는 매우 유사입니다. 난 다양 한 제품 상업적 시차 스크롤 효과 제품, 다른 공간 각도 사용자 경험에서 아주 좋은 효과 재생 표시를 참조 하십시오.

보이는 복잡 한 사실 이건이 디자인 80 's 작은 군주 학습 기계 톱에 일찍 생각, 새로운 것입니다.

문자 마리오, 전경, 배경 스테레오 효과 달성 하기 위해 서로 다른 이동 속도의 세 부분을 통해이 그림. 같은 아날로그 웹 페이지에 대 한 사실 이다. 롤링 검사 사이트에 다음과 같은 레이어 해야한다: 배경 레이어, 콘텐츠 계층, 텍스처 레이어.

배경 레이어 (느린)에 스크롤

스크롤 (보조 느린) 텍스처 레이어 (요소 콘텐츠 레이어와 배경 레이어 사이); 실제 생활 경험에의 하면 멀리 경치 이동 더 느린.

(이 페이지의 스크롤 속도와 일치 될 수 있습니다) 콘텐츠 레이어 스크롤입니다.

우리 3 개의 층의 회전 속도 일치 하지 않는, 우리는 달라질 간단한 효과 스크롤.

물론, 이것은 단지 간단한 스크롤 시차 효과 얻을 수, 거리 좋은 롤링 검사 사이트에서 충분 하지 않습니다.

그들이 어떻게 그것을 보고 몇 가지 외국 예를 분석 하자.

http://www.nintendo.com.au/gamesites/mariokartwii/

보세요이 마리오 자동차의 웹사이트:

이 사이트에는 배경 레이어, 트랙, 이전 화면과 다음 그림의 역할에 단서를 재생 하는 전체 역에 걸쳐 사이트를 통해 연결 했다. 시차 스크롤 또한 수행 됩니다도 따라. 지도 계층 화면에 있는 역할을 했다 렌더링 분위기 하나 속도 속도 압 연 가까운 전망 동일 하지 않습니다, 그렇게 사람들이이 시간의 종류 웹을 검색 하지는 하지만 갤럽의 의미의 세대의 트랙에. 콘텐츠 레이어 사이트는 콘텐츠의 프레 젠 테이 션을 잊지 않는 하는 동안 재미 있다. 탐색의 위치는 매우 긴 탐색 필수적 이므로 많은 스크린, 있다입니다 자주 사이트의 시차 스크롤. 사용자가 어디에 있는지 그리고 얼마나 그들은 왼쪽, 그리고 또한 사용자가 이전 콘텐츠를 반환할 수 있도록 탐색에 역할을 중요 하다.

보세요 http://intacto10years.com/index_start.php에이 사이트.

사이트는 부하의 시작 부분에 페이지의 하단 이야기 배경에 대 한 공간에서 여행 캐리어로 로켓 점프 합니다. 점차적으로 롤링 상향, 현장의 의미와 함께 2012 년 2001에서 Intacto의 이미지 로켓의 발사 페이지와 10 년의 역사. 매우 활발 하 고 재미 있는.

비슷한 사이트 http://lostworldsfairs.com/atlantis/는

이 사이트는 독창적인 멋진 바다 투어 아래로 페이지를 변환합니다. 많은 다른 "풍경"은 매우 흥미로운 심해 종 본다 또한 점차적으로 웹 페이지의 스크롤 악당이 점차 깊은 바다로 싱크 깊이 눈금자로 이동.

이러한 세 가지 예는 때문에 그들은 일반적인 고 시차 사이트 기술 스크롤의 범주를 나타냅니다.

이런이 종류의 사이트 개편, 현장 이야기의 원래 지루한 내용이 될 것입니다. 이 분명 이야기 논리를가지고 디자이너를 필요 합니다.

필요 비주얼 가이드 역, 그냥 걸쳐 요소 같은 마리오의 트랙, Intacto 우주선, 스쿠버 다이빙 파이프와 악당. 이 비주얼 가이드 줄 것 이다 당신이 세대의 감각 장면에서. 마치이 기본 요소와 전체 이야기를 경험 했다.

디자인 레이어 링, 디자이너 배경 레이어, 매핑 계층 및 콘텐츠 레이어 사이의 관계를 있다.

페이지 자체의 기능에 따라 지도 계층에 대 한 필요성을 정의

시각 효과 더 효과적으로 의사 소통을 위해 존재 하는 매핑 계층 그러나 주의 경우, 그것은 사용의 원래 목적을 위반 한다.

콘텐츠 레이어의 프레 젠 테이 션은 가장 중요 한, 배경 레이어 및 레이어 공상 디자이너 디자인 과정에서의 수에 관계 없이, 사용자의 디스플레이의 콘텐츠 레이어는 가장 높은 우선 순위.

물론, 디자인 스크롤 시차 사이트는 가장 큰 어려움의이 종류는 이야기에서 속 인 다, 아마도 누군가가 물었다: "내가 원하는 디자인 사이트의 내용을 어떻게 해야할지 말해 어렵다?" 다음 시차를 압 연에 대 한 또 다른 일반적인 설계 기법을 설명 하겠습니다. "이야기" 반대로 내가 전화 그것은 "다중-시나리오."

몇 가지 전형적인 밤을 주고:

Spotify의 공식 웹사이트 https://www.spotify.com/int/ 등

웹 사이트에서 들어 사방 (들어 사방), 검색 및 발견 (검색 및 찾아보기) 컬렉션 (당신의 컬렉션을 구축)을 구축, 따라 & 공유 (초점 및 공유), 라디오 (라디오)이 5 위도 Spotify의 음악 제품 소개. 적절 한 배경 이미지를 사용 하 여 5 개의 장면을 만들고 제품의 5 개의 기능을 소개 합니다. 디자이너 콘텐츠 레이어 및 배경 계층으로 웹 페이지를 분할 하 고 롤링 시차를 스크롤할 때 속도 차이 사용 합니다. 장면, 화면 또한 불릴 수 있다 그림 5 장면 수직 스크롤 화면 전환 달성을 통해 서로 독립.

또 다른 예: http://www.ok-studios.de/home/

이 웹사이트 디자이너는 또한 멀티 장면 스타일을 사용 하 여, 분할 많은 장면, 장면과 장면 일반적으로 색상 구별에 십자로 페이지는 매우 분명 한 장면을 나눕니다. 현장에서 디자이너는 주변 부품의 가우스 흐림을 따라서 미묘 하 게 깊이의 시각적 효과 형성 만든다. 기술 구현에서 다른 계층된 롤링 속도의 사용 이외에 아니다, 뿐만 아니라 표시 범위에의 해당 요소를 정의. 스크롤할 때 범위를 벗어나면 부분 형성은 가려진 시각적으로 계층된 효과 숨겨집니다.

다시이 사이트에서 보세요: http://www.zensorium.com/tinke/

이것은 제품 소개 사이트, 디자이너는 매우 흥미로운, 소개 하는 여러 시나리오의 형태로 제품 몇 가지 주요 기능, 프로세스 및 모든 장면을 통해 단서로 제품 자체에서. 그것은 이야기와 현장 조합 같은 종류 의입니다.

그것은 몇 가지 예제에서 시차 사이트 스크롤의이 종류의 특성을 요약 하면 어렵지 않다.

스크롤 시차 웹 디자인 프로세스:

모든 10243.html 후 "> 비주얼 디자이너 출력 시각적 초안으로는 끊임없이 변화 하는, 그래서 디자인과 전통적인 웹 페이지는 매우 다른 시차 사이트를 스크롤 하는 동안 정적 사진은." 디자인의 시작, 디자이너는이 페이지는 시차를 압 연에 적합을 결정 해야 합니다. 결정 후 롤링 시차를 채택, 디자이너는 기존 콘텐츠 데이터 구성, 이야기 또는 장면, 다음 아이디어에 따르면 주요 국가의 시각 디자인 원고를 디자인 해야 합니다. 이 단계는 기본적으로 작업 완료 된 전통적인 웹 디자이너 할 다른 사람에 게 넘겨 될 수 있습니다. 하지만 시차 사이트를 스크롤 하는 것은 좋은, 시각 디자인 작업은 이제 막 시작,이 시간에,에 대 한 책임을 져야 필요가 및 당신의 디자인 아이디어를 설명 하기 위해 디자이너를 리팩터링, 운동 하는 방법 계층 어떻게 해야 하. 그것은 항상 쉬운 디자이너의 구현을 리팩터링 하 고 일반적으로 디자이너 등 비용 때문에 작품을 재설계로 돌아갈 필요 합니다. 반복 된 통신을 통해 반복 실행-예상된 아름 다운 스크롤 시차 사이트 완료.

몇 가지 팁 및 스크롤 시차 웹사이트의 디자인에 작은 세부 사항:

1. 로드를 잊지.

콘텐츠 레이어 링 대형 사진이 나 PNG 그림을 많이 사용 하므로 볼륨은 종종 더 큰 때문에 패 럴 랙 스 사이트를 스크롤, 그래서 로딩 애니메이션이 이번 디자인을 잊지 마세요.

2. 슬래시의 독창적인 사용입니다.

바닥에서 슬래시를 그릴 때 그것 일반적으로 시각적으로 그것을 특정 각도에서 오른쪽 아래 모서리에서 그려집니다 환상을 주고 있다. 그래서 대각선 레이아웃은 스크롤 시차 사이트의 디자인에 자주 사용 된다.

3입니다. 순수한 색깔의 사용

단색 보다 더 직관적이 고 간결한 백그라운드가 있다. 단색은 여러 가지 방법으로 표현할 수 있습니다.

단색을 쉽게 그라데이션 및 사진, 보다 확장 되며 단색 시차 간격 사이 쉽게 구분할 수 있습니다. 사용에서 우리는 다양 한 시각 효과 달성 하기 위해 색상의 투명도 조정할 수 있습니다. 그래서 순수한 색깔의 사용은 또한 시차 디자이너 스크롤의 위대한 사랑 이다.

말 끝에 쓰기: 시각 디자인으로 실제로, 있다 많은 족 쇄, 수 발생 스크롤 시차 프로젝트, 발생된 지는 쉽게가 게 쉽지 않다, 좋은 플레이, 디자인 색상을 많이 만들 것입니다.