청계산 매봉자락에 위치한 주거 명작 디아크카운티 과천 분양 사이트입니다. 각 사이트 내에 텍스트, 이미지에 애니메이션을 넣어 정적인 느낌보다는 동적인 느낌을 주어 사용자의 재미를 더 했고, 다양한 분양 상품구조 소개, 안내, 분양 상품 갤러리를 통해 원하는 주거 환경을 확인 하실 수 있습니다.
Public Link 바로가기 : https://jujudac.netlify.app/
Live Link 바로가기 : http://www.xn--vb0bm7mh4nclbb8n30c1yejvg.com/
- 프로젝트 이름 : 과천 주택 분양 사이트 🏠
- 프로젝트 작업기간 : 2021.11-2021.12
- 개발 언어 :
HTML,CSS,Javascript,scss,gulp,jQuery,node.jsswiper - 개인 프로젝트 : 작업자 본인
- 적응형 홈페이지
- 디아크카운티 특화
- 상품소개
- 분양안내
- 갤러리
- 온라인 문의
node.js 설치 & 실행 모듈 설치
nvm install v6.4.0
npm installgulp 설치
npm install gulp@3.9.1 gulp 실행
gulp| Main | Gallery |
|---|---|
 |
 |
| 디아크카운티 특화 | 갤러리 |
| Benefits | Household |
|---|---|
 |
 |
| 분양안내 | 상품소개 |
- Main / 디아크카운티 특화 🪄
전체 UI 하드코딩으로 구현했습니다. 메인의 두번째 섹션 슬라이드에서는 슬라이드 이미지가 마우스 스크롤에 반응하는 페럴럭스 효과를 적용하였습니다. 넘기면 이미지가 stagger형태로 이미지가 롤링됩니다. 상품 소개 섹션 빌리지에서는 저택의 path 라인을 따서 링크를 삽입하였고, 마우스를 호버하면 해당 저택의 정보를 확인 할 수 있습니다. - Gallery / 갤러리 🖼️
첫 화면에서 자연스럽게 텍스트와 이미지에 동적 모션을 주었고, swiper 플러그인을 사용하여 슬라이드 스와이프 되도록 작업하였습니다. 갤러리 이미지를 클릭하면 해당 옵션 토글 화면이 슬라이드업 되고 화면 업다운 스크롤 시 추가 정보를 나타내는 슬라이드를 구현했습니다. - Household / 상품소개 📦
스크롤시 상품리스트가 fade-In 되고, 해당 상품 클릭시 옵션을 확인 할 수 있는 팝업창이 보여집니다. 내부 구조 이미지가 2개 이상일때 슬라이드를 추가하였습니다.
- 반응형에 대비하지 못하였다.