섹션 버튼을 누르면 해당 섹션으로 이동하고, 해당 섹션이 나타날때는 각 버튼에 on클래스가 추가됨
<header> <!-- 반드시 absolute나 fixed로 줘야함. --> </header> <section class="sec01 fullpage"> <!-- 화면에 가득찰 섹션은 동일한 class명을 갖아야 한다. --> <div class="cts_wrapper"> <!-- 섹션 내부의 콘텐츠를 감싸는 요소 (위아래 가운데 배치될 요소만) --> </div> </section> <section class="sec02 fullpage"> <!-- 해당 섹션이 보일때 on클래스가 추가됨(jquery에서) --> <div class="cts_wrapper"> </div> </section> <section class="sec03 fullpage"> <div class="cts_wrapper"> </div> </section> <footer> <!-- 높이가 낮은 footer가 존재해도 됨. --> </footer> <aside> <ul> <li><button>1번 섹션</button></li> <!-- 버튼을 누르면 해당 섹션으로 이동 --> <li><button>2번 섹션</button></li> <!-- 해당 섹션이 보일때 li에 on클래스가 추가됨(jqeury에서) --> <li><button>3번 섹션</button></li> </ul> </aside>
.fullpage{
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width:100%;
} /* 절대 fullpage에 margin/padding값이 들어가면 안됨 (jquery에서 윈도우의 높이값을 fullpage의 높이값으로 줌) */
.cts_wrapper{} /* 절대 cts_wrapper에 padding-top값이 들어가면 안됨 (jquery에서 padding-top으로 여백을 줌) */
footer{
position: absolute;
top: 0;
left: 0;
width: 100%;
} /* 반드시 footer도 absolute로 줘야함 */
@media screen and (max-width:640px){ /* 패럴랙스가 해지되는 사이즈 */
.fullpage{
position: relative;
top: auto;
left: auto;
} /* 높이값을 가질 수 없음 */
.cts_wrapper{}
footer{
position: relative;
top: auto;
left :auto;
}
}
var page_wrap = $(".layout"); // 홈페이지 전체를 감싸는 영역의 이름
var page_name = $(".fullpage");
var page_inner_name = $(".cts_wrapper"); // 위아래 가운데 배치될 영역의 이름
var page_css = "on"; // 각 섹션이 보일때 추가될 class명
var window_h = $(window).height();
var window_w = $(window).width();
var index_wrap_name = $("aside"); // 퀵메뉴의 이름
var index_name = $("aside ul li"); // 퀵메뉴 하나의 이름
var index_length = index_name.length;
var index_css = "on"; // 퀵메뉴에 현재 메뉴에 추가되는 클래스명
var mobile_size = 640; // 모바일로 변환되는 사이즈 (자동스크롤, 자동높이지정 해제)
var footer_use = true; // footer의 존재여부 (true - 존재함, false - 존재하지 않음)
var footer_name = $("#footer"); // footer이름
var footer_use_h; // footer의 높이값
var header_name = $("#header"); // header의 이름
var header_fix_use = true; // header에 fixed를 준 경우 (만약 absolute나 주지 않은 경우는 false을 줘야 한다.)
var header_fix_h; // header의 높이값
var page_index = 1; // 현재 페이지번호
var prev_index;
var page_total;