Fullpage 메뉴(★IE7 완벽지원)

펜션 홈페이지 또는 기업 홈페이지 제작할때 유용한 제이쿼리입니다.

 

풀페이지로 시원하게 보여주고 싶을때 사용하는 fullpage.js입니다.

 

사용방법은 아래 코드 참고 부탁드립니다.

 

지금은 유료로 라이센스가 변경되었지만 예전 2.9.7 버전은 무료로 사용가능합니다.

 

fullPage.js 2.9.7버전 다운로드

 

fullPage.js-2.9.7.zip

8.36MB

 

<link rel="stylesheet" type="text/css" href="../common/css/reset.css">
		<link rel="stylesheet" type="text/css" href="../common/css/jquery.fullPage.css">
		<script type="text/javascript" src="../common/js/jquery.min.js"></script>
		<script type="text/javascript" src="../common/js/jquery.slimscroll.min.js"></script>
		<script type="text/javascript" src="../common/js/jquery.fullPage.js"></script>

		<!-- 스타일 -->
		<style type="text/css">
		#wrap { width:100%; }
		#header { position:fixed; left:0; top:0; width:100%; background:#333; z-index:1; }
		#header div.header_inner { position:relative; margin:0 auto; width:950px; height:80px; }
		#header h1 { padding:25px 0 0 25px; font-size:25px; }
		#header a { color:#fff; }
		#header ul#gnb { position:absolute; right:30px; top:30px; }
		#header ul#gnb li { float:left; margin-left:30px; }
		#header ul#gnb li a.on { color:#f00; }

		.section p.tit { font-size:40px; font-weight:bold; text-align:center; }
		.section1 p.tit { color:#fff; }
		</style>
		<!-- // 스타일 -->
		<div id="wrapper">

			<div id="header">
				<div class="header_inner">
					<h1><a href="#firstPage">Logo</a></h1>
					<ul id="gnb">
						<li data-menuanchor="firstPage"><a href="#firstPage">Menu1</a></li>
						<li data-menuanchor="secondPage"><a href="#secondPage">Menu2</a></li>
						<li data-menuanchor="3rdPage"><a href="#3rdPage">Menu3</a></li>
						<li data-menuanchor="lastPage"><a href="#lastPage">Menu4</a></li>
					</ul>
				</div>
			</div>
			<!-- // header -->

			<div id="wrap">
				<div class="section section1">
					<div class="slide">
						<p class="tit">Title1-1</p>
					</div>
					<div class="slide">
						<p class="tit">Title1-2</p>
					</div>
					<div class="slide">
						<p class="tit">Title1-3</p>
					</div>
				</div>
				<div class="section section2">
					<p class="tit">Title2</p>
				</div>
				<div class="section section3">
					<div class="slide">
						<p class="tit">Title3-1</p>
					</div>
					<div class="slide">
						<p class="tit">Title3-2</p>
					</div>
					<div class="slide">
						<p class="tit">Title3-3</p>
					</div>
				</div>
				<div class="section section4">
					<p class="tit">Title4</p>
				</div>
			</div>
			<!-- // wrap -->

		</div>
		<!-- // wrapper -->

		<!-- 스크립트 -->
		<script type="text/javascript">
		$("#wrap").fullpage({
			'verticalCentered': true,  // 가운데 정렬 → ie7에선 작동되지 않음
			'css3': true,
			'sectionsColor': ['#111', '#999', '#666', '#aaa'],
			'navigation': true,
			'navigationPosition': 'right',
			'scrollOverflow': true,
			anchors: ['firstPage', 'secondPage', '3rdPage', 'lastPage'],
			'menu': '#gnb',
			// 'scrollingSpeed': 1700,
			'onLeave': function(anchorLink, index){
				if(index == 1){
					$('#gnb a').removeClass('on');
					$('#gnb a').eq(0).addClass('on');
				}else if(index == 2){
					$('#gnb a').removeClass('on');
					$('#gnb a').eq(1).addClass('on');
				}else if(index == 3){
					$('#gnb a').removeClass('on');
					$('#gnb a').eq(2).addClass('on');
				}else if(index == 4){
					$('#gnb a').removeClass('on');
					$('#gnb a').eq(3).addClass('on');
				}
			}
		});
		</script>
		<!-- // 스크립트 -->

 

더 자세한 사용방법은 아래 사이트 참고 부탁드립니다.

https://github.com/alvarotrigo/fullPage.js

alvarotrigo/fullPage.js

혹시 내용이 도움 되었다면 유튜브 채널오셔서 다양한 정보 보시고 

구독과 좋아요 부탁드립니다. 

감사합니다. 



스톤모두 유튜브 무료 강의 : https://www.youtube.com/channel/UCZUPZrlC-A8u4Y8KbU0HUvQ?sub_confirmation=1 

스톤모두 네이버 스토어 : https://smartstore.naver.com/stonemodoo 

스톤모두 모두홈페이지 : https://stone.modoo.at/ 

스톤모두 워드프레스 홈페이지 : https://stonemodoo.com/