패럴랙스 & 자동 스크롤(모든버전 가능) - 설명페이지

<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로 줘야함 */

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;