#
FullPage
1. FullPage 1.1. 무료버전 v 2.9.7
#
목차
#
1. FullPage
풀페이지 사용법
#
1.1. 무료버전 v 2.9.7
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>풀페이지</title>
<link rel="stylesheet" href="lib/jquery.fullpage.min.css" />
<style>
header {
position: fixed;
left: 0;
right: 0;
top: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 100;
}
header nav ul {
display: flex;
justify-content: center;
list-style: none;
}
header nav ul li {
margin: 0 20px;
}
header nav ul li a {
color: white;
}
header nav ul li.active a {
background-color: white;
color: black;
}
#fullpage {
text-align: center;
font-size: 2em;
color: white;
}
.fp-controlArrow.fp-next {
right: 100px;
}
</style>
</head>
<body>
<header>
<nav>
<ul id="menu">
<li class="active"><a href="#sec1">section1</a></li>
<li><a href="#sec2">section2</a></li>
<li><a href="#sec3">section3</a></li>
<li><a href="#sec4">section4</a></li>
</ul>
</nav>
</header>
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">
<div class="slide">
<h3>슬라이드2-1</h3>
</div>
<div class="slide">
<h3>슬라이드2-3</h3>
</div>
<div class="slide">
<h3>슬라이드2-4</h3>
</div>
<div class="slide">
<h3>슬라이드2-5</h3>
</div>
<div class="slide">
<h3>슬라이드2-6</h3>
</div>
</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section fp-auto-height">
<h2 style="color: red">FOOTER</h2>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="lib/jquery.fullpage.min.js"></script>
<script>
$('#fullpage').fullpage({
anchors: ['sec1', 'sec2', 'sec3', 'sec4'],
sectionsColor: ['#ff0000', '#f000ff', '#ff00ff', '#ff0fc0'],
navigation: true,
navigationPosition: 'right',
afterLoad: function (obj, idx) {
console.log('obj=', obj, 'idx=', idx);
var activeMenu;
if (idx == 1) {
activeMenu = $('#menu').find('li').first();
} else {
activeMenu = $('#menu')
.find('li')
.eq(idx - 1);
}
activeMenu.addClass('active').siblings().removeClass('active');
},
});
</script>
</body>
</html>