[WEB DESIGN] 스크롤을 이용한 디자인

 

One Page Site

 

원 페이지 사이트 : 웹 사이트를 한 페이지로 만드는 것

- 한 페이지 안에 모든 내용이 다 들어있기 때문에 따로 메뉴를 선택하지 않아도 화면을 스크롤하면서 내용을 볼 수 있음

- 스크롤을 할 때 마다 새로운 내용을 볼 수 있으므로 사용자의 호기심을 자극할 수 있음

- 예시 : http://thus.co.kr/    https://datacenter.navercorp.com/ko/index.html

데이터센터 ‘각’

thus   그러므로    ∴

 

네비게이션

- 내비게이션 바를 이용해 해당 항목으로 바로 이동

- 화면 스크롤을 할 때 즉시 이동할 수 있고, 스크롤 효과를 주면서 이동할 수 있음

- 왼쪽이나 오른쪽에 수직으로 내비게이션을 배치하기도 함

  - 예시 : https://www.p-city.com/front?ad=true

파라다이스시티

 

적합성

- 내용이 많지 않고 화면에 여백이 많은 사이트를 제작할 때

- 간단한 회사 소개 사이트나, 카페, 레스토랑 사이트처럼 이미지가 많은 곳에 주로 사용

- 개인 포트폴리오나 갤러리 사이트 등에 많이 사용

 

 

---

 

 

Parallax Scrolling

 

패럴랙스 스크롤링 : 화면이 스크롤 될때 배경과 그 위에 있는 요소들이 각기 다른 방향으로 움직이게 하거나 동작시간을 다르게 함

- 마치 눈 앞에서 애니메이션을 보는 듯한 느낌을 줌

- 예시 : http://nasaprospect.com/  

 

 

적합성

- 배경이 잘 드러나야 하고, 복잡한 이미지나 텍스트가 많지 않은 것이 좋음

- 스토리텔링 사이트 : http://www.rolexawards.com/40

Rolex.org - Rolex Awards for Enterprise all projects

- 제품 설명 사이트 : http://podopodstore.com/mycat/

myCat for Apple iPhone 6

- 회사 소개 사이트