本文通過一個簡單實例介紹fullpage.js插件中經常用到的配置和方法，通過實例可以讓大家更容易理解，效果如下圖：
第一--四屏利用回調函數afterLoad給每一屏滾動結束後增加一個動畫；
第五屏調用插件自帶的幻燈片效果。
編寫靜態頁面
html代碼和css樣式如下圖，這一塊比較簡單，也不是本文重點，詳細代碼可自行查看下圖。
Tips:
1.HTML的佈局、ID名和Class名要根據fullpage來使用；
2.fullpage插件依賴jquery庫，所以需要引入jquery庫；
3.爲了增加動畫效果，需引入jquery.easing庫。
實現原理
設置實例的fullpage配置項，詳細分析如下：
1.sectionsColor設置每一屏的背景色，該例子背景色被背景圖遮蓋；
2.anchors定義錨鏈接，菜單（menu）可根據該設置點擊跳轉到相應的屏；
3.menu綁定菜單，設定的相關屬性與 anchors 的值對應後，菜單可以控制滾動（影響點擊高亮效果）；
4.navigation是否顯示項目導航（該例子左邊中間的圓點）；
5.navigationPosition項目導航的位置，可選left或right；
6.navigationTooltips鼠標放在項目導航顯示的提示信息；
7.showActiveTooltip是否鼠標不放上去就直接顯示小圓點提示信息；
8.slidesNavigation是否顯示幻燈片的項目導航；
9.controlArrows是否顯示幻燈片左右箭頭。
利用fullpage的回調函數afterLoad實現滾動到某一屏的動畫效果，該函數接收兩個參數（anchorLink和index），詳細分析如下：
滾到到第一屏時候（index === 1），（由於文字默認隱藏在頂部（top:-120%），這裏設置了top: '0'），文字會延遲0.5s（delay(500)）後慢慢（animate）的從頂部滑動下來（持續1.5s）；
滾到到第二屏時候（index === 2），（由於文字默認隱藏在左邊（left:-120%），這裏設置了left: '0'），文字會延遲0.5s（delay(500)）後慢慢（animate）的從左邊滑動過來（持續1.5s）；
滾到到第三屏時候（index === 3），（由於文字默認隱藏在底部（bottom:-120%），這裏設置了bottom: '0'），文字會延遲0.5s（delay(500)）後慢慢（animate）的從底部滑動上來（持續1.5s）；
滾到到第四屏時候（index === 4），（由於文字默認隱藏，這裏設置了fadeIn(2000)），文字會慢慢顯示（持續2s）。
Tips：第五屏只有幻燈片，未添加動畫效果。
爲了讓再次滾動到某一屏還有動畫效果，利用fullpage的回調函數onLeave實現滾動前把文字復原到默認位置和顯示狀態下，代碼跟afterLoad函數類似，可自行查看下圖代碼。
最後分析幾個有用的函數：
1.利用定時器可以設置屏幕自動往上或往下滾動（$.fn.fullpage.moveSectionDown()），只有兩個方向上或下；
2.利用定時器可以設置屏幕自動往上或往下滾動（$.fn.fullpage.moveSlideRight()），只有兩個方向左或右；
3.利用函數resize在拉伸瀏覽器屏幕時候調用函數autoScrolling，如果寬度小於1024關閉全屏滾動效果，改爲自帶滾動條。
注意事項
fullpage使用2.0版本，3.0需要註冊