fullpage.js 풀페이지

• 버전3(회사라이센스 있음) CDN

<link rel="stylesheet" type="text/css" href="https://unpkg.com/fullpage.js@3.1.2/dist/fullpage.min.css" />

<script type="text/javascript" src="https://unpkg.com/fullpage.js@3.1.2/dist/fullpage.min.js"></script>

• 스크립트

$(document).ready(function() {
  $('#indexFullpage').fullpage({
    //options here
    licenseKey: '*-*-*-*',
    // verticalCentered: false,
    // responsiveWidth: 769,
    scrollHorizontally: true,
    // scrollOverflow:true,
    // anchors:['about', 'project', 'service', 'voucher', 'news', 'threeD', 'footer'],
    afterLoad: function(anchorLink, index) {
      if ($('.cont3, .cont4, .cont5').hasClass("active")) {
        $("#header .logo").addClass('on');
        $("#header .gnb").addClass('on');
        $("#header .gnb li").eq(0).addClass('on');
      } else {
        $("#header .logo").removeClass('on');
        $("#header .gnb").removeClass('on');
        $("#header .gnb li").eq(0).removeClass('on');
      };
    },
  });
  $('.topBtn').click(function() {
    $.fn.fullpage.moveTo(1, 1); // 이동하고싶은 페이지
  });
});

• 구역 높이에 맞게 화면높이 변경 클래스
  fp-auto-height
• 반응형 클래스
  fp-auto-height-responsive
• 스크롤 필요한 구역있을 때 아래 스크립트 추가 후 써줌
  scrollOverflow:true,

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/vendors/scrolloverflow.min.js" integrity="sha512-pYyQWhzi2lV+RM4GmaUA56VPL48oLVvsHmP9tuQ8MaZMDHomVEDjXXnfSVKXayy+wLclKPte0KbsuVoFImtE7w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

• aos 쓰고 싶을 때

afterLoad: function(anchorLink, index){
    jQuery('.section.active [data-aos]').addClass("aos-animate");
},
onLeave: function(){
    jQuery('.section [data-aos]').removeClass("aos-animate");
},
onSlideLeave: function(){
    jQuery('.slide [data-aos]').removeClass("aos-animate");
},
afterSlideLoad: function(){
    jQuery('.slide.active [data-aos]').addClass("aos-animate");
},