-
건설
신뢰를 바탕으로 최초, 최고, 차별화된 공간문화를 창조합니다. 오피스, 물류시설, 골프장, 리모델링에 이르기까지 최고의 공간가치를 창조하는 Global E&C Partner 입니다.
MORE
-
부동산
통합된 Solution으로 고객의 자산가치를 극대화합니다. 개발, 자산운영, 공간 복합화 전문가 집단이 고객 부동산의 자산가치가 극대화될 수 있도록 최상의 종합부동산 서비스를 제공합니다.
MORE
-
리조트
국내 1등의 PRESTIGE 리조트 사업개발 및 운영 역량을 확보하고 있습니다. 국내 유일의 세계 100대 코스 클럽 나인브릿지, 최고의 Private Club 해슬리 나인브릿지는 CJ건설을 대표하는 최고의 브랜드입니다.
MORE
패럴랙스(차원, 시차를 이용한 효과) & 겹치기 스크롤
문서의 구조
아래에 깔린 컨텐츠 (obj_back)
아래 콘텐츠가 올라오면 안보일 컨텐츠 (obj_back_cts)
위에 올라간 컨텐츠 들을 감싸는 영역 (container)
스크롤 한번에 위로 올라갈 컨텐츠 (obj_top)
일반 컨텐츠
- obj_back과 obj_top의 높이는 동일하게 설정 됨
- 컨텐츠를 감싸는 영역 container는 obj_back을 제외한 모든 요소를 감싸는 것이 좋습니다. z-index로 obj_back보다 위로 배치시켜야 하기때문
- 스크롤을 해서 obj_top이 올라오면 obj_back의 일부 컨텐츠를 (obj_back_cts) 숨김처리 할 수 있습니다.
기본 html 구조
<div class="visual"> /* obj_back */ <div class="cts"> /* obj_back_cts */ 스크롤을 내리면 사라질 컨텐츠 </div> </div> <div class="container"> <div class="business"> /* obj_top */ 스크롤 하면 올라올 컨텐츠 </div> <div> 다른 일반 컨텐츠 </div> </div>
필수 css 코드
처음에는 코딩을 할때는 아래에서 언급한 css값을 주지말고 기본값으로 코딩한 후에 마지막에 css 값을 주고 jquery를 적용한다.
.visual{
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 20;
} /* 높이는 jquery에서 결정 */
.container{
position: relative;
z-index: 21;
} /* 모든 컨텐츠를 visual위에 올리기 위해서 */
.business{} /* 높이는 jquery에서 결정, .visual과 떨어뜨리는 것도 jquery에서 계산해서 줌. */