实例介绍fullpage.js常用的配置和方法

本文通过一个简单实例介绍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需要注册