Fullpage

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.fullPage.js"></script>
v.3 이상부턴 유료이므로 2.7버전 사용

HTML

<main id="fullpage">
	<section id="sec01" class="section"></section>
	<section id="sec01" class="section"></section>
	<section id="sec01" class="section"></section>
	<section id="sec01" class="section"></section>
	<section id="sec01" class="section"></section>
	<footer id="footer" class="section fp-auto-height"></section>
</main>
<ul id="menu">
    <li data-menuanchor="sec01"><a href="#1"></a></li>
    <li data-menuanchor="sec02"><a href="#2"></a></li>
    <li data-menuanchor="sec03"><a href="#3"></a></li>
    <li data-menuanchor="sec04"><a href="#4"></a></li>
    <li data-menuanchor="sec05"><a href="#5"></a></li>
</ul>

JS

/** fullpage **/
$(window).resize(function () {
  createFullpage();
})

createFullpage();

function createFullpage() {
  if ($(window).width() > 768) {
    $("#fullpage").fullpage({
      css3: true,
      menu: '#menu',
      anchors: ['sec01', 'sec02', 'sec03', 'sec04', 'sec05'],
      onLeave: function (index, nextIndex, direction) {
        $(".section").eq(index - 1).find(".aos-init").removeClass("aos-animate");
        $(".section").eq(nextIndex - 1).find(".aos-init").addClass("aos-animate");
      },
    })
  }
}

CSS

.fp-auto-height  , .fp-auto-height .fp-tableCell{height: auto !important;}
.section:not(.section01) .fp-tableCell {align-items: center;display: flex;height:100vh;}