jQuery的一個(gè)全屏jQuery全屏滾動(dòng)插件fullPage.js苔悦。我們經(jīng)常見到一些全屏的特絢麗頁面秽誊，手指或者鼠標(biāo)滑動(dòng)一下就是一整屏切換念脯，而且還有各種效果吊宋。
下面我們就介紹一下jQuery的fullPage.js的如何使用及常用的配置酥宴。
1. fullpage.js的主要功能
fullPage.js是一個(gè)基于jquery的插件啦吧，它能很方便的制作出全屏網(wǎng)站，github地址拙寡。
主要功能有：
- 支持鼠標(biāo)滾動(dòng)授滓。
- 支持前后退和鍵盤控制。
- 多個(gè)回調(diào)函數(shù)肆糕。
- 支持手機(jī)般堆，平板觸摸事件。
- 支持css3動(dòng)畫诚啃。
- 支持窗口縮放淮摔。
- 窗口縮放時(shí)自動(dòng)調(diào)整。
- 可設(shè)置滾動(dòng)寬度始赎，背景顏色和橙，滾動(dòng)速度仔燕，循環(huán)選項(xiàng)，回調(diào)魔招，文本對齊方式等晰搀。
2. fullpage.js的使用
2.1 兼容性
fullpage.js是jQuery的插件，需要依賴jQuery办斑，要求jQuery最低的版本是1.6+外恕。瀏覽器能兼容到ie8+及其他現(xiàn)代瀏覽器。
2.2 下載fullpage.js
第一種方法： 直接下載壓縮包乡翅，地址
第二種方法： 使用前端的包管理工具
// With bower
bower install fullpage.js
// With npm
npm install fullpage.js
第三種： CDNJS地址:https://cdnjs.com/libraries/fullPage.js
2.3 引入文件及文件依賴關(guān)系
fullpage.js插件依賴：fullpage的css文件鳞疲，jQuery，如果設(shè)置了options中css3: false*峦朗，如果你用除了jQuery的默認(rèn)linear 和swing緩動(dòng)的效果之外的緩動(dòng)效果的話建丧，需要添加 jQuery UI library。
引入依賴的文件波势，注意順序翎朱！
<!--引入fullpage.js插件的樣式，必須-->
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- 如果是ie8瀏覽器或者設(shè)置了css3: false 那么需要引入jQuery的easing緩動(dòng)插件尺铣，默認(rèn)可以省略就行了拴曲。 -->
<script src="vendors/jquery.easings.min.js"></script>
<!--引入jQuery的插件fullpage.js核心文件-->
<script type="text/javascript" src="jquery.fullPage.js"></script>
2.4 編寫頁面結(jié)構(gòu)
編寫html的頁面結(jié)構(gòu)，每個(gè)section獨(dú)占一屏幕凛忿，默認(rèn)顯示第一屏澈灼。
<div id="fullpage">
<div class="section">第一屏</div>
<div class="section">第二屏</div>
<div class="section">第三屏</div>
<div class="section">第四屏</div>
</div>
如果需要從非第一屏開始顯示，則需要給對應(yīng)的section添加active樣式類即可店溢。
<div class="section active">第三屏</div>
2.5 編寫初始化的腳本
$(function() {
$('#fullpage').fullpage();
});
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全屏插件</title>
<link rel="stylesheet" href="./js/fullpage/jquery.fullpage.css">
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/fullpage/jquery.fullpage.min.js"></script>
</head>
<body>
<div id="dowebok">
<div class="section">
<h3>第一屏</h3>
</div>
<div class="section">
<h3>第二屏</h3>
</div>
<div class="section">
<h3>第三屏</h3>
</div>
<div class="section">
<h3>第四屏</h3>
</div>
</div>
<script>
$(function () {
$('#dowebok').fullpage();
});
</script>
</body>
</html>
3. fullpage的初始化的設(shè)置
在初始化全屏插件的時(shí)候叁熔，有很多設(shè)置項(xiàng)。如下所示：
$(document).ready(function() {
$('#fullpage').fullpage({
//Navigation
menu: '#menu',
lockAnchors: false,
anchors:['firstPage', 'secondPage'],
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['firstSlide', 'secondSlide'],
showActiveTooltip: false,
slidesNavigation: false,
slidesNavPosition: 'bottom',
//Scrolling
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
fitToSectionDelay: 1000,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
continuousHorizontal: false,
scrollHorizontally: false,
interlockedSlides: false,
dragAndMove: false,
offsetSections: false,
resetSliders: false,
fadingEffect: false,
normalScrollElements: '#element1, .element2',
scrollOverflow: false,
scrollOverflowReset: false,
scrollOverflowOptions: null,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,
bigSectionsDestination: null,
//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,
//Design
controlArrows: true,
verticalCentered: true,
sectionsColor : ['#ccc', '#fff'],
paddingTop: '3em',
paddingBottom: '10px',
fixedElements: '#header, .footer',
responsiveWidth: 0,
responsiveHeight: 0,
responsiveSlides: false,
parallax: false,
parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
//Custom selectors
sectionSelector: '.section',
slideSelector: '.slide',
lazyLoading: true,
//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
afterResponsive: function(isResponsive){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
});
});
哇有很多設(shè)置項(xiàng)床牧，還有事件處理程序荣回。
他們的詳細(xì)介紹如下：
- 選項(xiàng)
| 選項(xiàng) | 類 型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| verticalCentered | 字符串 | true | 內(nèi)容是否垂直居中 |
| resize | 布爾值 | false | 字體是否隨著窗口縮放而縮放 |
| slidesColor | 函數(shù) | 無 | 設(shè)置背景顏色 |
| anchors | 數(shù)組 | 無 | 定義錨鏈接 |
| scrollingSpeed | 整數(shù) | 700 | 滾動(dòng)速度，單位為毫秒 |
| easing | 字符串 | easeInQuart | 滾動(dòng)動(dòng)畫方式 |
| menu | 布爾值 | false | 綁定菜單戈咳，設(shè)定的相關(guān)屬性與 anchors 的值對應(yīng)后心软，菜單可以控制滾動(dòng) |
| navigation | 布爾值 | false | 是否顯示項(xiàng)目導(dǎo)航 |
| navigationPosition | 字符串 | right | 項(xiàng)目導(dǎo)航的位置，可選 left 或 right |
| navigationColor | 字符串 | #000 | 項(xiàng)目導(dǎo)航的顏色 |
| navigationTooltips | 數(shù)組 | 空 | 項(xiàng)目導(dǎo)航的 tip |
| slidesNavigation | 布爾值 | false | 是否顯示左右滑塊的項(xiàng)目導(dǎo)航 |
| slidesNavPosition | 字符串 | bottom | 左右滑塊的項(xiàng)目導(dǎo)航的位置著蛙，可選 top 或 bottom |
| controlArrowColor | 字符串 | #fff | 左右滑塊的箭頭的背景顏色 |
| loopBottom | 布爾值 | false | 滾動(dòng)到最底部后是否滾回頂部 |
| loopTop | 布爾值 | false | 滾動(dòng)到最頂部后是否滾底部 |
| loopHorizontal | 布爾值 | true | 左右滑塊是否循環(huán)滑動(dòng) |
| autoScrolling | 布爾值 | true | 是否使用插件的滾動(dòng)方式删铃，如果選擇 false，則會(huì)出現(xiàn)瀏覽器自帶的滾動(dòng)條 |
| scrollOverflow | 布爾值 | false | 內(nèi)容超過滿屏后是否顯示滾動(dòng)條 |
| css3 | 布爾值 | false | 是否使用 CSS3 transforms 滾動(dòng) |
| paddingTop | 字符串 | 0 | 與頂部的距離 |
| paddingBottom | 字符串 | 0 | 與底部距離 |
| fixedElements | 字符串 | 無 | |
| normalScrollElements | 無 | ||
| keyboardScrolling | 布爾值 | true | 是否使用鍵盤方向鍵導(dǎo)航 |
| touchSensitivity | 整數(shù) | 5 | |
| continuousVertical | 布爾值 | false | 是否循環(huán)滾動(dòng)踏堡，與 loopTop 及 loopBottom 不兼容 |
| animateAnchor | 布爾值 | true |
- 事件
| 名稱 | 說明 |
|---|---|
| afterLoad | 滾動(dòng)到某一屏后的回調(diào)函數(shù)猎唁，接收 anchorLink 和 index 兩個(gè)參數(shù)，anchorLink 是錨鏈接的名稱顷蟆，index 是序號胖秒，從1開始計(jì)算 |
| onLeave | 滾動(dòng)前的回調(diào)函數(shù)缎患，接收 index、nextIndex 和 direction 3個(gè)參數(shù)：index 是離開的“頁面”的序號阎肝，從1開始計(jì)算； |
| nextIndex | 是滾動(dòng)到的“頁面”的序號肮街，從1開始計(jì)算风题； |
| direction | 判斷往上滾動(dòng)還是往下滾動(dòng)，值是 up 或 down嫉父。 |
| afterRender | 頁面結(jié)構(gòu)生成后的回調(diào)函數(shù)沛硅，或者說頁面初始化完成后的回調(diào)函數(shù) |
| afterSlideLoad | 滾動(dòng)到某一水平滑塊后的回調(diào)函數(shù)，與 afterLoad 類似绕辖，接收 anchorLink摇肌、index、slideIndex仪际、direction 4個(gè)參數(shù) |
| onSlideLeave | 某一水平滑塊滾動(dòng)前的回調(diào)函數(shù)围小，與 onLeave 類似，接收 anchorLink树碱、index肯适、slideIndex、direction 4個(gè)參數(shù) |
案例1：延遲加載案例：
<!--圖片或者視頻的延遲加載, 只需要把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>
<!--另外不能在初始化的設(shè)置：lazyLoading: true ,不能為false-->
案例2：設(shè)置不同屏的背景色
$('#fullpage').fullpage({
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});
4. fullpage的方法
| 名稱 | 說明 |
|---|---|
| moveSectionUp() | 向上滾動(dòng) |
| moveSectionDown() | 向下滾動(dòng) |
| moveTo(section, slide) | 滾動(dòng)到 |
| moveSlideRight() | slide 向右滾動(dòng) |
| moveSlideLeft() | slide 向左滾動(dòng) |
| setAutoScrolling() | 設(shè)置頁面滾動(dòng)方式成榜，設(shè)置為 true 時(shí)自動(dòng)滾動(dòng) |
| setAllowScrolling() | 添加或刪除鼠標(biāo)滾輪/觸控板控制 |
| setKeyboardScrolling() | 添加或刪除鍵盤方向鍵控制 |
| setScrollingSpeed() | 定義以毫秒為單位的滾動(dòng)速度 |
例如：
$('#moveSectionUp').click(function(e){
e.preventDefault();
$.fn.fullpage.moveSectionUp();
});
- 配合animate.css實(shí)現(xiàn)動(dòng)態(tài)效果案例
首先說明animate.css本身就有兼容問題框舔，ie9+瀏覽器可以無視，另外考慮到手機(jī)的性能赎婚，移動(dòng)端盡量不要使用大量動(dòng)畫刘绣。
一般情況下都是用戶進(jìn)入某個(gè)屏的時(shí)候，動(dòng)畫開始啟動(dòng)入場挣输，離開的時(shí)候啟動(dòng)出場（可以省略）纬凤，然后下一屏開始入場。配合animate.css的問題歧焦，animate的動(dòng)畫添加上animated樣式和具體的動(dòng)畫類型才會(huì)具有動(dòng)畫效果移斩。如果一開始全設(shè)置好了那么只有第一屏有動(dòng)畫效果，不是我們想要的結(jié)果绢馍。
配合fullpage的onLeave事件向瓷，可以實(shí)現(xiàn)在上一屏離開的時(shí)候，給下一屏添加動(dòng)畫樣式類舰涌，并把上一屏的動(dòng)畫樣式類去掉猖任。動(dòng)畫樣式類可以提前記錄在一個(gè)數(shù)組中或者是放到動(dòng)畫元素的自定義屬性中。例如代碼：
<div id="fullpage">
<div class="section s1">
<h3 class="sec-title amt amt-delay-3 lightSpeedIn" amt="lightSpeedIn">人工智能時(shí)代瓷耙，學(xué)習(xí)編程讓孩子不一樣的未來朱躺！</h3>
<div class="img-list amt amt-delay-6 bounceInUp" amt="bounceInUp">
<img data-src="./img/s1-1.png" alt="孩子的未來">
<img data-src="./img/s1-2.jpg" alt="孩子的未來">
<img data-src="./img/s1-3.jpg" alt="孩子的未來">
</div>
</div>
<div class="section s2">
<h3 class="sec-title amt amt-delay-3" amt="bounceInDown">我們的理念</h3>
<ul class="s2-l amt amt-delay-6" amt="slideInLeft">
<li class="s2-l-item">imagine（想象）：讓孩子去天馬行空刁赖；</li>
<li class="s2-l-item">create（創(chuàng)造）：通過創(chuàng)造現(xiàn)實(shí)結(jié)合起來；</li>
<li class="s2-l-item">play（動(dòng)手玩）：親自動(dòng)手創(chuàng)作項(xiàng)目长搀；</li>
<li class="s2-l-item">share（分享）：項(xiàng)目分享給其他人宇弛；</li>
<li class="s2-l-item">reflect（反思）：對項(xiàng)目的反思和改進(jìn)。</li>
</ul>
<div class="s2-r amt amt-delay-8" amt="slideInRight">
<img data-src="./img/s2-1.png" alt="少兒編程">
</div>
</div>
</div>
<script>
$(function () {
$('#fullpage').fullpage({
sectionsColor: ['rgba(88,185,156, 1)', '#fff', '#DE8910', '#0da5d6', 'rgb(235, 76, 67)', 'rgb(141, 127, 219)', 'rgb(227,135,88)','rgb(98,198,188)' ],
lazyLoading: true,
onLeave: function (index, nextIndex, direction) {
$('.section').find('.amt').each(function(index, elem) {
var amt = $(elem).attr('amt');
$(elem).removeClass(amt);
})
$('.section').eq(nextIndex-1).find('.amt').each(function(index, elem) {
var amt = $(elem).attr('amt');
$(elem).addClass(amt)
})
}
});
});
</script>
