Question

Fullpage 是最好用的全屏滚动插件，很多前端设计师用他制作出了优秀的效果，本小节的内容将为大家介绍如何快速的使用 Fullpage 插件，构建自己的全屏单页网站。

1、安装插件

如果你熟悉 bower 或者 npm，您可以使用下面的命令安装 Fullpage

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

当然您也可以从 Fullpage 的 Github 地址下载得到源文件，这两种方法所获取到的 Fullpage 插件文件是一样的。

2、引入插件文件

这个插件依赖于 jQuery，所以你还需要下载 jQuery，并且在 Fullpage 插件之前引入。

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

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

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

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

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

最后，如果你不想下载到项目中，您可以使用开源项目 CDN 服务，Fullpage 在 CDNJS 的地址：https://cdnjs.com/libraries/fullPage.js

3、编写 HTML 代码

默认情况下，每一屏幕的代码都需要有 DIV 包裹，并且设置 DIV 的类名为 section，默认情况下，第一个 setion 将作为首页显示在页面上。

<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 作为首页的第一屏展示，你只需要给这个 section 添加一个 active 的类，Fullpage 会自动优先展示这个屏幕，例如定义下面的代码：

<div class="section active">Some section</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>

4、初始化 Fullpage

使用 jQuery 的文档加载完毕以后执行函数，初始化 Fullpage 插件。

$(document).ready(function() {
$('#fullpage').fullpage();
});

所有的选项设置更复杂的初始化可能看起来像这样：

$(document).ready(function() {
$('#fullpage').fullpage({
//Navigation
menu: false,
lockAnchors: false,
anchors:['firstPage', 'secondPage'],
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['firstSlide', 'secondSlide'],
showActiveTooltip: false,
slidesNavigation: true,
slidesNavPosition: 'bottom',
 
//Scrolling
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
normalScrollElements: '#element1, .element2',
scrollOverflow: false,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,
 
//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,
 
//Design
controlArrows: true,
verticalCentered: true,
resize : false,
sectionsColor : ['#ccc', '#fff'],
paddingTop: '3em',
paddingBottom: '10px',
fixedElements: '#header, .footer',
responsiveWidth: 0,
responsiveHeight: 0,
 
//Custom selectors
sectionSelector: '.section',
slideSelector: '.slide',
 
//events
onLeave: 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){}
});
});

更多 fullpage 插件的使用和 API 文档，请访问 Fullpage 中文文档 。

Answer 1

默认需要配置那些参数呢？