fullPage是一個能全螢幕滾動的外掛，會讓你的網站看起來很不一樣。但也因為他的效果會讓整個網站變成fixed，導致許多效果需要另外做調整。

$cover

版本選擇

目前最新的版本為version4，除了解決了前幾個版本的bug，還多了擴充功能(需要花錢購買)。如果不想有金鑰警告，也可以使用舊版，但是有許多無法解決的坑所以不太建議。

安裝

需要放css跟js兩個檔案 cdnjs連結

基本設定

首先先建立基本的框架，也就是只有單純的頁面跟下滑的效果

範例一:基本型

初始化fullPage可以有兩種寫法 

// 寫法一
    new fullpage('#fullpage',{
        ...
    });
    
// 寫法二
    $('#fullpage').fullpage({
        ...
    });

  • #fullpage可以自己替換成想控制的容器名稱
  • ...是用來放fullPage的配置參數

fullPage的架構寫法 

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

  • #fullpage是被控制的容器，要放在最外層
  • 每一個.section代表一個頁面，想要有幾個頁面就要放上對應的數量

這邊補充一下使用到的fullPage參數及功用:

名稱 預設值 用途
sectionSelector section 修改html外層框架的class名稱
navigation false 是否會出現右側導覽按鈕
verticalCentered true 是否垂直置中
responsiveWidth 0 停止運作的斷點，如果為1024表示視窗寬度1024以下不會作用
credits {enabled: true, label: 'Made with fullpage.js', position: 'right'} 創作者區塊，如果不想顯示就把這功能關掉

如果要做成像一頁式網站的話，那就不能缺少選單及錨點。fullPage.js也能很輕鬆建立出錨點的功能。

範例二:新增選單及錨點

menu的架構寫法 

<ul id="menu">
    <li data-menuanchor="firstPage">
        <a href="#firstPage">
            ...
        </a>
    </li>
    <li data-menuanchor="secondPage">
        <a href="#secondPage">
            ...
        </a>
    </li>
</ul>

  • #menu是被控制的容器，要放在最外層，而且要跟#fullpage分開放
  • 每一個按鈕要加上跟anchors對應的data-menuanchor

menu position的調整

因為fullpage預設的menu的position是absolute，但是網站一般習慣使用的header都是relative或是fixed，所以我這邊做了點調整。調整完後會發現滾動的距離會算錯，所以要利用margin-top跟padding-top、z-index的搭配修正滾動距離。

這邊解釋一下fullPage參數的功用:

名稱 預設值 用途
menu false 設定綁定選單的class名稱，需要用data-menuanchor跟anchors做綁定，綁定方法可以參考codepen
anchors [] 定義錨點連結，有錨點後點按後可以快速定位到某一頁面，定義位置的時候不需要加#。(如果在指定的section加上active，就可以預設打開此頁)

如果要做成有多個大類的網站，那就必須要有header跟footer，而且footer的高度不會占到一整個螢幕。

範例三:新增header及footer

footer在v4版本非常的簡便，只需要在設區塊的高度即可。(如果在v3版以下需要設定fp-auto-height，然後就有很多的坑在等你 🙂 🙂 🙂 )

動畫設定

因為fullPage會把整個區塊的position變成fixed，讓監聽進入視窗的程式失效導致無法順利跳出動畫，這時候可以用ScrollMagic.js做輔助。

範例四:加入ScrollMagic.js

為什麼要用ScrollMagic?

fullPage有內建會在當前的section加上active，但有一個問題是不論往上滑或往下滑到那個區塊都會發動一次動畫效果，一般來說只需要往下滑發動一次動畫效果即可，而ScrollMagic剛好可以達成。

ScrollMagic的使用方式也相當簡單(了解更多)，只要按照codepen的寫法填入對應section的id即可。

fullPage雖然也有參數可以監控 像是afterLoad、onLeave…等等，但如果沒有很複雜的動畫需求不建議使用…因為設定上相當麻煩。

那麼fullPage的介紹先到這裡，如果未來有嘗試到好用的功能再分享上來 😉 😉 😉