fullpage插件的使用

fullPage.js是一个基于jquery的插件，它能很方便的制作出全屏网站。
网址

fullpage.js的主要功能

2. fullpage.js的使用

2.1 兼容性

fullpage.js是jQuery的插件，需要依赖jQuery，要求jQuery最低的版本是1.6+。浏览器能兼容到ie8+及其他现代浏览器。

2.2 下载fullpage.js

第一种方法：直接下载压缩包
第二种方法：使用前端的包管理工具

// With bower
bower install fullpage.js// With npm
npm install fullpage.js

第三种：CND地址

2.3 引入文件及文件依赖关系

先引入fullPage.css----再引入jquery.js---------最后引入fullPage.js
因为fullpage.js插件依赖：fullpage的css文件，jQuery

<link rel="stylesheet" type="text/css" href="/fullpage/jquery.fullPage.css" />
<script src="/fullpage/jquery.min.js"></script>
<script type="text/javascript" src="/fullpage/jquery.fullPage.js"></script>

如果你需要自定义页面滚动的效果，你需要引入jquery.easings.min.js文件。

<script src="/fullpage/jquery.easings.min.js"></script>

对于内容比较多的页面，可以设置右侧的滚动条，但是默认情况下无法滚动，你需要jquery.slimscroll.min.js文件来自定义滑条滚动效果。

<script type="text/javascript" src="/fullpage/jquery.slimscroll.min.js"></script>

2.4 编写页面结构

编写html的页面结构，每个section独占一屏幕，默认显示第一屏。

<div id="fullpage">
<div class="section">第一屏</div>
<div class="section">第二屏</div>
<div class="section">第三屏</div>
<div class="section">第四屏</div>
</div>

如果需要从非第一屏开始显示，则需要给对应的section添加active样式类即可。

<div class="section active">第三屏</div>

Fullpage自带左右滑动的幻灯片，只需要在section中添加DIV元素，并且给DIV元素添加slide类，FUllpage会自动生成幻灯片特效，例如下面的代码：

<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
<div class="slide"> Slide 4 </div>
</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的初始化的设置

在初始化全屏插件的时候，有很多设置项

$(document).ready(function() {$('#fullpage').fullpage({//Navigationmenu: false,//绑定菜单，设定的相关属性与anchors的值对应后，菜单可以控制滚动，默认为false。anchors:['firstPage', 'secondPage'],//anchors定义锚链接，默认为[]lockAnchors: false,//是否锁定锚链接，默认为false,设为true后链接地址不会改变navigation: false,//是否显示导航，默认为falsenavigationPosition: 'right',//导航小圆点的位置navigationTooltips: ['firstSlide', 'secondSlide'],//导航小圆点的提示showActiveTooltip: false,//是否显示当前页面的tooltip信息slidesNavigation: true,//是否显示横向幻灯片的导航，默认为falseslidesNavPosition: 'bottom',//横向导航的位置，默认为bottom，可以设置为top或bottom//Scrollingcss3: true,//是否使用CSS3 transforms来实现滚动效果，默认为truescrollingSpeed: 700,//设置滚动速度，单位毫秒，默认700autoScrolling: true,//是否使用插件的滚动方式，默认为true,若为false则会出现浏览器自带滚动条fitToSection: true,//设置是否自适应整个窗口的空间，默认值：truescrollBar: false,//是否包含滚动条，默认为false,若为true浏览器自带滚动条出现easing: 'easeInOutCubic',//定义页面section滚动的动画方式，若修改此项需引入jquery.easing插件easingcss3: 'ease',//定义页面section滚动的过渡效果，若修改此项需引入第三方插件loopBottom: false,//滚动到最低部后是否连续滚动到顶部，默认为falseloopTop: false,//滚动到最顶部后是否连续滚动到底部，默认为falseloopHorizontal: true,//横向slide幻灯片是否循环滚动，默认为truecontinuousVertical: false,//是否循环滚动，不兼容loopTop和loopBottom选项normalScrollElements: '#element1, .element2',//避免自动滚动，滚动时的一些元素，例如百度地图scrollOverflow: false,//内容超过满屏后是否显示滚动条，true则显示滚动条，若需滚动查看内容还需要jquery.slimscroll插件的配合touchSensitivity: 15,//在移动设备中滑动页面的敏感性，默认为5最高100，越大越难滑动normalScrollElementTouchThreshold: 5,//AccessibilitykeyboardScrolling: true,//是否可以使用键盘方向键导航，默认为trueanimateAnchor: true,//锚链接是否可以控制滚动动画，默认为true,若为false则锚链接定位失效recordHistory: true,//是否记录历史，默认为true,浏览器的前进后退可导航。若autoScrolling:false,那么这个属性将被关闭//DesigncontrolArrows: true,//定义是否通过箭头来控制slide,默认trueverticalCentered: true,//定义每一页的内容是否垂直居中，默认trueresize : false,//字体是否随窗口缩放而缩放，默认falsesectionsColor : ['#ccc', '#fff'],//为每个section设置background-color属性paddingTop: '3em',设置每一个section顶部的padding,默认为0paddingBottom: '10px',设置每一个section底部的padding,默认为0fixedElements: '#header, .footer',固定元素，默认为null,需要配置一个jquery选择器，在页面滚动时，fixElements设置的元素不滚动responsiveWidth: 0,responsiveHeight: 0,//Custom selectorssectionSelector: '.section',//section选择器。默认为.sectionslideSelector: '.slide',//slide选择器，默认为.slide//eventsonLeave: function(index, nextIndex, direction){},afterLoad: function(anchorLink, index){},afterRender: function(){},afterResize: function(){},afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}});
});

事件的名称

案例1：延迟加载案例：
fullpage.js提供了一种懒加载图像，视频和音频元素，所以他们不会放慢您的网站加载或不必要的浪费数据传输。使用延迟加载时，所有这些元素只会加载时进入视口。启用延迟加载，所有你需要做的是改变你的src属性的data-src如下图所示：

<img data-src="data:image.png">
<video><source data-src="video.webm" type="video/webm" /><source data-src="video.mp4" type="video/mp4" />
</video>

案例2：设置不同屏的背景色

$('#fullpage').fullpage({sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});

4. fullpage的方法

示例：

$('#moveSectionUp').click(function(e){e.preventDefault();
$.fn.fullpage.moveSectionUp();
});

5.配合animate.css实现动态效果案例

首先说明animate.css本身就有兼容问题，ie9+浏览器可以无视，另外考虑到手机的性能，移动端尽量不要使用大量动画。
一般情况下都是用户进入某个屏的时候，动画开始启动入场，离开的时候启动出场（可以省略），然后下一屏开始入场。配合animate.css的问题，animate的动画添加上animated样式和具体的动画类型才会具有动画效果。如果一开始全设置好了那么只有第一屏有动画效果，不是我们想要的结果。
配合fullpage的onLeave事件，可以实现在上一屏离开的时候，给下一屏添加动画样式类，并把上一屏的动画样式类去掉。动画样式类可以提前记录在一个数组中或者是放到动画元素的自定义属性中。例如代码：

<!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"><link rel="stylesheet" href="./lib/fullPage.js-master/dist/jquery.fullpage.min.css"><script src="./lib/jquery-1.12.4.min.js"></script><script src="./lib/fullPage.js-master/dist/jquery.fullpage.min.js"></script><link rel="stylesheet" href="./lib/animate.css"><link rel="stylesheet" href="./css/index.css"><title>fullpage全屏项目案例</title>
</head>
<body><!-- 第一步：引入jquery第二步：引入jQuery的fullpage插件的js脚本和样式第三步：编写html标签（编写全屏的html）第四步：编写jquery的插件fullpage的初始化的代码。 --><div class="fullpage-container"><!-- 第一屏 --><div class="section"><div class="container"><h3 amt="animated slideInLeft" class="animated slideInLeft">学习不能扬汤止沸，要一鼓作气</h3><img amt="animated slideInUp" class="animated slideInUp" src="./img/1.jpg" alt=""></div></div><!-- 第二屏 --><div class="section"><div class="container"><h3 amt="animated slideInLeft" class="">我们跟牛逼的人的差距就是你不够勤奋</h3><img amt="animated slideInUp" src="./img/2.jpg" alt=""></div></div><!-- 第三屏 --><div class="section"><div class="container"><h3 amt="animated slideInRight" class="">你不够勤奋</h3><img amt="animated bounceInRight" src="./img/1.jpg" alt=""></div></div><div class="section">4</div><div class="section">5</div></div><script>//编写 fullpage插件初始化的代码$(function() {$('.fullpage-container').fullpage({sectionsColor: ['red', 'lightgreen', 'blue', 'teal', '#c09'],// 在当前屏离开之前会执行下面的方法。onLeave: function(index, nextIndex, dir) {// console.log(index, nextIndex, dir);// 让当前屏的 动画样式类去掉。$('[amt]').each(function(i, element) {var amt = $(element).attr('amt');$(element).removeClass(amt);});// 给下一个显示的屏里面的 要动画的标签添加 动画样式类。$('.fullpage-container .section').eq(nextIndex - 1).find('[amt]').each(function(i, elem) {$(elem).addClass($(elem).attr('amt'));});}});});</script>
</body>
</html>