워드프레스에서 fullpage.js 사용

fullpage.js 주소 : https://alvarotrigo.com/fullPage/ 

fullPage scroll snapping. Create full screen pages fast and simple

cdn css 주소 

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.min.css" integrity="sha512-otONSJGv1l0LjJXcgyqi2MeKXtnthkiXAleeQjFJOKYcVD5u+mOuPb7xCnlsb74Ld+N0ONbP7KYRmW2/OWrvaA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

 

 

cdn js 주소

  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/vendors/easings.js" integrity="sha512-FFmLOg/pFlqTgDEWhqL3zxfLRRjv54Dx170T9CgCiTx4+iVVEMPXku6egqJ9wau9y9ORJIaPFuLYR3nsFBm5uQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.min.js" integrity="sha512-LGiXf+jHGTHcIybSsOWO3I/in+OObCkcEsWIZ7IyhzfD6RzD5qDUw2CK+JveuI7zTSEcDG//bIOvOpAJW2BWsg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

 

 

-----------------------------

구조는 아래와 같다. 

 

<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>

 

 

data-anchor="mainsec1" 의 값은 기존의 id 값과 같은 값이 있으면 안된다. 

----------------------------------

home.js 처럼 파일 하나를 만들어 아래처럼 설정해 주었다.  

코드는 아래와 같다. 

    //fullpage
    new fullpage('#fullpage', {
      scrollBar:true,
      navigation: true,
      responsiveWidth: 700,
      navigationTooltips: ['Home', 'Our Buziness', 'News', 'Technology', 'Contact Us'],
      showActiveTooltip: true,

    });