效果效果
本文介紹使用fullPage.js插件可輕易創建全屏滾動網站。很多網站只有一個首頁，它是由多個可以滾動的全屏內容組成，使用鼠標滾動或方向鍵可控制滾屏，支持CSS3動畫和手機觸屏，效果非常高大上。
使用方法
包含文件
<link rel="stylesheet" type="text/css" href="fullpage.css" /><!-- 以下行是可選的。 只有在使用選項css3:false，并且您希望使用其他緩動效果，而非“linear”、“swing”或“easeInOutCubic”時才有必要。 -->
<script src="vendors/easings.min.js"></script><!-- 以下行僅在使用選項scrollOverflow:true的情況下是必需的 -->
<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script><script type="text/javascript" src="fullpage.js"></script>
如果您愿意，可以使用bower或npm安裝fullPage.js：
// 使用bower
bower install fullpage.js// 使用npm
npm install fullpage.js
HTML結構
HTML文件中的首行HTML代碼必須使用HTML DOCTYPE 聲明，否則可能會遇到代碼段高度問題。HTML 5 doctype中的示例：
<!DOCTYPE html>。
<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>
每個代碼段定義為包含.section的元素。 第一個代碼段作為第一屏，是默認激活。 代碼段應被包含在(即<div id="fullpage"> )父元素中。 注意，父元素不能是body元素。
如果你想定義一個與眾不同的起始頁面，而不是原始第一段或第一個滑動頁，只需將.active類添加到你想首先載入的段或滑動頁。
<div class="section active">Some section</div>
Javascript
用原生Javascript初始化，只需要在關閉標簽之前調用fullPage.js。
new fullpage('#fullpage', {//options hereautoScrolling:true,scrollHorizontally: true
});
//methods
fullpage_api.setAllowScrolling(false);
也可以使用jQuery進行初始化，前提需要先引用jQuery庫。
$(document).ready(function() {$('#fullpage').fullpage({//options hereautoScrolling:true,scrollHorizontally: true});//methods$.fn.fullpage.setAllowScrolling(false);
});
功能選項
所有選項設置的更復雜的初始化如下所示：
var myFullpage = new fullpage('#fullpage', {//導航menu: '#menu', //綁定菜單，設定的相關屬性與 anchors 的值對應后，菜單可以控制滾動lockAnchors: false, //(默認為false)確定URL中的錨是否在庫中完全有效。 您仍然可以在函數和回調內部使用錨，但是它們在滾動網站時不起任何作用。 如果你想在URL中使用錨點來將fullPage.js和其他插件結合起來，那就很有用。anchors:['firstPage', 'secondPage'], //定義要在每個部分的URL上顯示的錨鏈接(#example)。 錨點的值應該是獨一無二的。 數組中的錨的位置將限定錨被應用于哪些部分。navigation: false, //如果設置為true，則會顯示一個由小圓圈組成的導航欄navigationPosition: 'right', //(默認none)可以設置為left或right，并定義導航欄顯示的位置(如果使用的話)navigationTooltips: ['firstSlide', 'secondSlide'], //(默認為[])定義要使用導航圈的工具提示。 如果您愿意，也可以在每個部分中使用屬性data-tooltip來定義它們showActiveTooltip: false, //顯示垂直導航中主動查看節的持久工具提示slidesNavigation: false, //如果設置為true，則會顯示一個導航欄，該導航欄由站點上每個橫向滑塊的小圓圈組成。slidesNavPosition: 'bottom', //定義滑塊的橫向導航欄的位置。 值為top和bottom。//滾動css3: true, //是否使用 CSS3 transforms 滾動scrollingSpeed: 700, //滾動速度，單位為毫秒autoScrolling: true, //是否使用插件的滾動方式，如果選擇 false，則會出現瀏覽器自帶的滾動條fitToSection: true, //確定是否section放入視窗中fitToSectionDelay: 1000, //如果fitToSection設置為true，則延遲 以毫秒為單位scrollBar: false, //確定是否使用站點的滾動條。 在使用滾動條的情況下，autoScrolling功能仍將按預期工作。 用戶也可以使用滾動條自由滾動網站，當滾動完成時，fullPage.js將適配屏幕上的部分。easing: 'easeInOutCubic', //定義用于垂直和水平滾動的過渡效果。easingcss3: 'ease', //定義在使用css3：true的情況下使用的過渡效果。loopBottom: false, //滾動到最底部后是否滾回頂部loopTop: false, //滾動到最頂部后是否滾底部loopHorizontal: true, //定義水平滑塊是否在到達上一張或上一張幻燈片后循環continuousVertical: false, //是否循環滾動，與 loopTop 及 loopBottom 不兼容normalScrollElements: '#element1, .element2', //如果你想在滾動某些元素時避免自動滾動，這是你需要使用的選項scrollOverflow: false, //內容超過滿屏后是否顯示滾動條touchSensitivity: 15, //定義瀏覽器窗口寬度/高度的百分比，以及滑動到下一個節/幻燈片必須測量的距離normalScrollElementTouchThreshold: 5, //定義html節點樹的跳數閾值Fullpage將測試normalScrollElements是否匹配，以允許在觸摸設備上的div的滾動功能。bigSectionsDestination: null, //定義如何滾動到比視口大的部分。 默認情況下，如果您來自目的地上方的部分，fullPage.js將滾動到頂部，如果您來自目的地之下的部分，則會滾動到底部。 可能的值是top，bottom，null。//可訪問keyboardScrolling: true, //定義是否可以使用鍵盤瀏覽內容animateAnchor: true, //定義給定錨點(＃)的站點的負載是否會隨著動畫滾動到其目的地或直接加載給定部分recordHistory: true, //定義是否將網站的狀態推送到瀏覽器的歷史記錄。 設置為true時，網站的每個部分/幻燈片將作為新頁面，瀏覽器的后退和前進按鈕將滾動部分/幻燈片以達到網站的上一個或下一個狀態。 當設置為false時，URL將保持更改，但不會影響瀏覽器的歷史記錄。 使用autoScrolling：false時，該選項會自動關閉。//設計controlArrows: true, //確定是否將幻燈片的控制箭頭向右或向左移動verticalCentered: true, //在段落內部垂直居中。 當設置為true時，您的代碼將被庫包裝。可考慮使用委托或在afterRender回調中加載其他腳本sectionsColor : ['#ccc', '#fff'], //為每個部分定義CSSbackground-color屬性paddingTop: '3em', //與頂部的距離paddingBottom: '10px', //與底部距離fixedElements: '#header, .footer', //定義當使用css3選項保持固定時，哪些元素將從插件的滾動結構中移除。 它需要一個字符串與這些元素的Javascript選擇器。 (例如：fixedElements：'＃element1，.element2')responsiveWidth: 0, //一個正常的滾動(autoScrolling：false)將在定義的寬度下以像素為單位使用。 如果用戶希望將自己的響應式CSS用于身體標記，則會將fp-responsive類添加到身體標記中。 例如，如果設置為900，則每當瀏覽器的寬度小于900時，插件將像正常站點一樣滾動。responsiveHeight: 0, //一個正常的滾動(autoScrolling：false)將在定義的高度下以像素為單位使用。 如果用戶希望將自己的響應式CSS用于身體標記，則會將fp-responsive類添加到身體標記中。 例如，如果設置為900，則每當瀏覽器的高度小于900時，插件將像正常站點一樣滾動。//自定義選擇器sectionSelector: '.section', //定義用于插件部分的Javascript選擇器。 有時可能需要更改，以避免與使用與fullpage.js相同的選擇器的其他插件的問題。slideSelector: '.slide', //定義用于插件幻燈片的Javascript選擇器。 有時可能需要更改，以避免與使用與fullpage.js相同的選擇器的其他插件的問題。lazyLoading: true, //延遲加載默認是激活的，這意味著它會延遲加載包含屬性data-src的任何媒體元素//事件onLeave: function(index, nextIndex, direction){},//滾動前的回調函數，接收 index、nextIndex 和 direction 3個參數：index 是離開的“頁面”的序號，從1開始計算；nextIndex 是滾動到的“頁面”的序號，從1開始計算；direction 判斷往上滾動還是往下滾動，值是 up 或 down。afterLoad: function(origin, destination, direction){}, //滾動結束之后，一旦加載了節，就會觸發回調。afterRender: function(){}, //這個回調在頁面結構生成后立即被觸發。 這是您要用來初始化其他插件的回調函數，或者觸發任何需要文檔準備就緒的代碼afterResize: function(width, height){},//調整瀏覽器窗口大小后，會觸發此回調。afterResponsive: function(isResponsive){}, //在fullpage.js從正常模式變為響應模式或從響應模式變為正常模式之后，此回調將被觸發afterSlideLoad: function(section, origin, destination, direction){}, //滾動結束后，加載一個section的幻燈片后觸發回調。onSlideLeave: function(section, origin, destination, direction){} //一旦用戶離開幻燈片轉到另一個幻燈片，就會觸發此回調。返回false將在移動發生之前取消移動。
});
方法moveSectionUp() 向上滾動moveSectionDown() 向下滾動moveTo(section, slide) 滾動到moveSlideRight() slide 向右滾動moveSlideLeft() slide 向左滾動setAutoScrolling() 設置頁面滾動方式，設置為 true 時自動滾動setAllowScrolling() 添加或刪除鼠標滾輪/觸控板控制setKeyboardScrolling() 添加或刪除鍵盤方向鍵控制setScrollingSpeed() 定義以毫秒為單位的滾動速度
其他
延遲加載
fullPage.js提供了一種延遲加載圖像、視頻和音頻元素的方式，這樣它們不會減慢網站的加載速度，也不會浪費數據傳輸。 當使用延遲加載時，所有這些元素只有在進入視口時才會加載。 要啟用延遲加載，您只需將src屬性更改為data-src，如下所示：
<img data-src="image.png">
<video><source data-src="video.webm" type="video/webm" /><source data-src="video.mp4" type="video/mp4" />
</video>
如果您已經使用另一個使用data-src的延遲加載解決方案，則可以通過設置 lazyLoading: false選項來禁用fullPage.js延遲加載。
自動播放
對于視頻或音頻使用屬性 autoplay，或者對于youtube iframe使用參數autoplay=1將使得在加載頁面時播放媒體元素。 在段落/幻燈片載入使用而不是屬性data-autoplay播放。 例如：
<audio data-autoplay><source src="http://metakoncept.hr/horse.ogg" type="audio/ogg">
</audio>
暫停
嵌入式HTML5<video>/<audio>和Youtube iframe在離開某個段落或幻燈片時自動暫停。 可以通過使用屬性data-keepplaying來禁用。 例如：
<audio data-keepplaying><source src="http://metakoncept.hr/horse.ogg" type="audio/ogg">
</audio>
此外，fullpage.js還可以使用擴展插件，更多詳情請查看fullpage.js項目官網：https://github.com/alvarotrigo/fullPage.js.
總結
以上是生活随笔為你收集整理的全屏滚动插件fullPage.js的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
