<header>
<nav>
<ul>
<li data-menuanchor="section1"><a href="#section1">1</a></li>
<li data-menuanchor="section2"><a href="#section2">2</a></li>
<li data-menuanchor="section3"><a href="#section3">3</a></li>
<li data-menuanchor="section4"><a href="#section4">4</a></li>
<li data-menuanchor="footer"><a href="#footer">footer</a></li>
</ul>
</nav>
</header>
<main id="fullpage">
<section class="section">
<h2>section 1</h2>
</section>
<section class="section">
<div class="slide">
<h3>slide 01</h3>
</div>
<div class="slide">
<h3>slide 02</h3>
</div>
<div class="slide">
<h3>slide 03</h3>
</div>
</section>
<section class="section">
<h2>section 3</h2>
</section>
<section class="section">
<h2>section 4</h2>
</section>
<footer class="section fp-auto-height">
<h2>footer</h2>
<p>
footer의 높이는 <br />
auto로 변경된 것을 <br />
볼 수 있다 😎💨
</p>
</footer>
</main>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
body {font-family: 'Poppins', sans-serif;}
header {
position: fixed;
left: 0;
right: 0;
top: 0;
padding: 20px 0;
background-color: rgba(207, 207, 207, 0.349);
z-index: 100;
}
header ul {
display: flex;
justify-content: center;
list-style-type: none;
}
header li {
margin: 0 20px;
}
header li.active {
background-color: black;
color: white;
}
header a {
display: block;
text-decoration: none;
color: #2b8d2b;
}
h2,
h3,
footer p{
text-align: center;
}
/*fullpage.js 수정용*/
.fp-controlArrow {
padding: 1rem;
box-shadow: 1px -1px 0 1px #fff inset;
-webkit-box-shadow: 2px -2px #fff inset;
border: solid transparent;
transition: 0.2s;
}
.fp-controlArrow:hover{
box-shadow: 2px -2px 0 2px #ddd inset;
-webkit-box-shadow: 4px -4px #ddd inset;
}
.fp-controlArrow.fp-prev {
left: 50px;
border-width: 0 0 2rem 2rem;
border: solid transparent;
width: auto;
transform: rotate(45deg);
}
.fp-controlArrow.fp-next {
right: 50px;
border-width: 0 0 2rem 2rem;
border: solid transparent;
transform: rotate(225deg);
}
.fp-slidesNav{
left: 50% !important;
transform: translateX(-50%) !important;
right: auto;
}
$(function () {
$('#fullpage').fullpage({
//options here
anchors: ['section1','section2','section3','section4','footer'],
autoScrolling:true,
navigation: true,
navigationPosition: 'right',
sectionsColor: ['#6fd1ab', '#7ae2ba', '#95efcc', '#aff9dd', '#d9fff0'],
loopBottom: true,
slidesNavigation: true,
slidesNavPosition: 'bottom'
});
})
