FullPage.js全屏滚动插件

FullPage.js简介

fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站。
主要功能

支持鼠标滚动-
支持前进后退和键盘控制-
多个回调函数-
支持手机、平板触摸事件-
支持 CSS3 动画-
支持窗口缩放-
窗口缩放时自动调整-
可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

下载地址：
下载地址
 fullPage.js GitHub 地址下载地址

兼容性
fullPage.js 支持 IE8+ 及其他现代浏览器。

使用方法

1、引入文件

1
2
3

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

2、HTML

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

3、JavaScript

$(function(){
    $("#fullpage").fullpage();
    })
//或添加内容。
$(function(){
    $('#fullpage').fullpage({
        verticalCentered: false,
        css3: true,
        sectionsColor: ['#254875', '#00FF00', '#254587', '#695684'],
        anchors: ['page1', 'page2', 'page3', 'page4'],
        navigation: true,
        navigationPosition: 'right',
        navigationTooltips: ['fullPage.js', 'Powerful', 'Amazing', 'Simple']
    })
})

经测试，最好至少有 anchors这个参数，否则在火狐浏览器中，第一次滚动会直接滚到底部。

FullPage.js API

FullPage.js配置项

sectionsColor:[],//分别为各个section设置背景颜色属性,如sectionsColor: ['#254875', '#00FF00', '#254587', '#695684'],
controlArrows：默认为true，定义是否通过箭头来控制slide幻灯片，如果设置为false,幻灯片左右两侧的箭头就会消失，在移动设备上，可以通过滑动来切换幻灯片。
verticalCentered：默认为true，每一页的内容是否垂直居中；(测试时，vertical:true也可以。)
resize：默认为false，字体是否随着窗口缩放而缩放；
scrollingSpeed：滚动速度，单位为毫秒，默认为700；
anchors：[‘page1’,’’,’’,’’],定义锚链接，默认值为[].使每个section页面在地址栏有不同地址，便于直接找到某一section页面.定义锚链接的时候，值不能与其他的id与name值相同，且不需加#号。
lockAnchors: 是否锁定锚链接,默认为false，若为true，则所添加的anchors不会自动在地址栏生效，需手动在地址栏地址后面加上自己的命名。
easing：定义页面section滚动的动画方式，默认为easeInOutCubic，如果修改此项需引入jquery.easings插件或 jquery ui，
css3：是否使用css3 transforms来实现滚动效果，默认为true，可以提供支持css3的浏览器，比如移动设备等的速度。如果浏览器不支持css3,则会使用jquery来替代css3实现滚动效果(会略显卡顿。)
loopTop：滚动到顶部后是否连续滚动到底部，默认为false；
loopBottom：滚动到底部以后是否连续滚动到顶部，默认为false；
loopHorizontal：横向slide是否循环滚动，默认为true；
autoScrolling：是否使用插件的滚动方式，默认为true，，如果为false，则会出现浏览器自带的滚动条，将不会按页滚动，而是按照滚动条的行为来滚动。
scrollBar：是否包含滚动条，默认为false，如果设置为true，则按页滚动与滚动条滚动均有效.
paddingTop/paddingBottom: ,设置每一个section的顶部和底部的padding，默认为0；一般如果我们需要设置一个固定在顶部或者底部的菜单、导航、元素等，可以使用这两个配置项。
fixedElements：‘#ID名’，固定的元素，默认值为null，需要为其配置一个jquery选择器，在页面滚动的时候，fixedElements设置的元素固定不动，如果不加这个属性，那么你想固定的东西会被覆盖掉；
keyboardScrolling：是否可以使用键盘方向键导航，默认为true；
touchSensitivity：在移动设备中滑动页面的敏感性，默认为5，最高为100，越大越难滑动
continuousVertial: ,是否循环滚动，默认为false，如果设置为true，则页面会循环滚动，但是不会像loopTop/loopBottom那样生硬（这个属性和两个loop不兼容，不要同时设置），
animateAnchor：锚链接是否可以控制滚动动画，默认为true，若设置为false，则通过锚链接定位到某个section时不会有动画。
recordHistory：是否记录浏览历史，默认为true，可以记录页面滚动的历史，可以通过浏览器的前进后退来导航，如果设置了autoScrolling：false，则这个属性也被关闭；
menu：’#ul的ID名’，绑定菜单，设定的相关属性与anchors的值对应后，菜单可以控制滚动，默认为false,可以设置为菜单的jquery选择器。
(在这之前要先设置一个<ul id=""><li data-menuanchor="page1"><a href="#page1">section1</a></li></ul>
ps:data-menuanchor以及href的值都是与锚链接相对应的).
navigation：是否显示小圆点导航，默认为false
navigationPosition：导航小圆点的位置，可设置为left或者right
navigationTooltips：导航小圆点的提示，与每个页面对应，[‘’,’’,’’,’’],可以设置成和anchors一样。
showActiveTooltip: 是否显示当前页面的导航的tooltip信息,默认为false，设置为true时，则在小圆点处会自动显示navigationTooltips的内容。
slidesNavigation：是否显示横向幻灯片的导航，默认为false
slidesNavPosition：横向幻灯片的导航位置，默认为bottom，还可为top.
scrollOverflow：内容超过满屏后是否显示滚动条，默认为false，如果设置为true，则会显示滚动条，如果要滚动查看内容，还需要引入jquery.slimscroll插件。slimscroll插件主要用于模拟传统的浏览器滚动条.
sectionSelector： section的选择器，默认为.section；
slideSelector： slide的选择器，默认为.slide
(其他配置项，请查看官方文档。)

FullPage.js方法：

使用方式：$.fn.fullpage.方法名称()
FullPage.js方法：

moveSectionUp()：向上滚动一页。
moveSectionDown()：向下滚动一页。
moveTo(section,slide):滚动到第几页，第几个slide，section页面是从1开始，slide是从0开始的.
silentMoveTo(section,slide):滚动到第几页，和moveTo一样，但没有动画效果。
moveSlideRight():幻灯片向右滚动
moveSliadLeft（）：幻灯片向左滚动
setAutoScrolling（boolean）：动态设置autoScrolling
setLockAnchors(boolean):动态设置lockAnchor
setRecordHistory(boolean):动态设置recordHistory
setScrollingSpeed(milliseconds):动态设置scrollingSpeed
setAllowScrolling（Boolean，[directions]）:添加或删除鼠标滚轮/滑动控制，第一个参数表示是否启用，第二个为方向：all，up，down，left，right，方向可以取多个值，用逗号隔开。
作用：比如做一个有奖问答页面，提问的问题在前面的页面有答案，当滚动到最后一页时，不希望用户再滚动回之前的页面查看答案，就可以使用这样的方法。
destroy(type):销毁fullpage特效，type可以不写，或者使用all。type为空时，则fullpage特效消失，但fullpage给页面添加的样式和html元素仍存在；type为all时，则页面的一切(样式，html)等全部销毁，页面恢复到和不使用fullpage相同的效果。
reBuild（）：重新更新页面和尺寸，用于通过ajax请求后改变了页面结构之后，重建效果。

fullPage还支持延迟加载图片及视频：

通过用data-src代替原因的src属性,即在src之前加data-就可调用。
这样设置后，图片或视频在打开网页时不加载，只在滚动到当前页面时才加载；如果不设置，图片或视频会在打开网页时加载。
图片：<img data-src="image.png">
视频：

1
2
3

<video>
<source data-src="video.mp4" type="video/mp4">
</video>

FullPage.js回调函数

afterLoad（anchorLink，index）
滚动到某一section处，且滚动结束后，会触发一次此回调函数，函数接收anchorLink和index 两个参数，anchorLink是锚链接，index是序号（从1开始）。
作用：我们可以根据anchorLink和index的参数值的判断，触发相应的事件。
实例：

1
2
3

afterLoad: function(anchorLink,index){
            console.log("afterLoad:anchorLink"+anchorLink+";index:"+index);}
            //将两个参数打印出来，在控制台可以看到

onLeave（index，nextIndex，direction）
在离开一个页面section时，会触发一次此回调函数，接收index（离开时页面的序号）、nextIndex（滚动到的目标页面的序号）和direction（滚动的方向，有up和down）3个参数
通过return false；可以取消滚动

afterRender（）
页面初始化完成后的回调函数

afterResize（）
浏览器窗口尺寸改变后的回调函数

afterSlideLode（anchorLink，index，slideIndex，direction）
滚动到某一幻灯片slide后的回调函数，与afterLoad类似，接收anchorLink、index、slideIndex、direction 4个参数

onSlideLeave（anchorLink，index，slideIndex，direction，nextSlideIndex）
在离开一个幻灯片slide时会触发此函数，与onLeave相似，接收anchorLink，index，slideIndex，direction，nextSlideIndex 参数

FullPage.js实例：

单页面网站的实现步骤：
1、设计页面
2、准备文字和图片素材
3、按照设计实现基本的页面效果
4、实现动画(CSS3/Move.js插件)

动画实现，可以使用CSS3,也可以使用Move.js插件来实现。

Move.js插件

move.js是使用简单函数创建 CSS3 动画的一个简单的JavaScript库。move.js是一个js库，支持css3.
参考链接
move.js官网
 使用Move.js创建CSS3动画
例如：

1 2	.box{transition:margin 1s;} .box:hover{margin-left:100px;}

使用Move.js实现如下：

1
2
3

move(".box")
 .set('margin-left',100)
 .end();

Move.js的方法：

set(css属性，属性值):set()方法用于设置元素的css属性，他带有两个参数：css属性和属性值。示例用法：.set('margin-left', 500)
scale（缩放的倍数）:该方法用于放大或压缩元素的大小，按照提供的每一个值，将调用transform的scale方法：.scale(3, 3)
rotate（旋转的角度数）；可正可负.该方法通过提供的数值作为参数来旋转元素。当方法被调用的时候通过附加到元素的 transform 属性上。.rotate(90)

end（）；用于结束move.js代码片段的结束，标识动画的结束。此方法可接受一个回调函数.如：

move('.box')
  .set('background-color', 'red')
  .duration(1000)
  .end(function() {
    alert("Animation Over!");
  });

给页面添加动画效果可利用回调函数（另外：要实现某一东西从某一方向飞入，则首先给其设置一个较大的margin，并设置overflow：hidden，使此东西在页面中显示不出来，然后通过回调函数应用move.js的set（‘margin-方向’，‘使此东西在正确位置的margin值’）
示例代码：

$(function(){
    $("#fullpage").fullpage({
        verticalCentered:false,
        anchors: ['page1','page2','page3','page4'],
        navigation:true,
        // navigationPosition:'right',
        navigationTooltips:['它，终于来了。','真正与你贴近的个人设备。','重要的事，不错过。','在三个特点鲜明的系列中找到你的风格'],
        afterLoad:function(link,index){
            switch(index){
                case 1:
                    move('.section1 h1').scale(1.5).end();
                    move('.section1 p').set('margin-top','5%').end();
                    break;
                case 2:
                    move('.section2 h1').scale(0.7).end();
                    break;
                case 3:
                    move('.section3 h1').set('margin-left','20%').end();
                    move('.section3 p').set('margin-left','20%').end();
                break;
                case 4:
                    move('.section4 img.primary').rotate(360).end(function(){
                        move('.section4 img.sport').rotate(360).end(function(){
                            move('.section4 img.edition').rotate(360).end(function(){
                                move('.section4 h4.primary').scale(1.3).end(function(){
                                    move('.section4 h4.sport').scale(1.3).end(function(){
                                        move('.section4 h4.edition').scale(1.3).end();
                                    });
                                });
                            });
                        });
                    });
                    break;
                default:
                    break;
            }
        },
        onLeave:function(link,index){
            switch(index){
                case 1:
                    move('.section1 h1').scale(1).end();
                    move('.section1 p').set('margin-top','800px').end();
                    break;
                case 2:
                    move('.section2 h1').scale(1).end();
                    break;
                case 3:
                    move('.section3 h1').set('margin-left','-1500px').end();
                    move('.section3 p').set('margin-left','1500px').end();
                break;
                case 4:
                    move('.section4 img.primary').rotate(-360).end()
                    move('.section4 img.sport').rotate(-360).end()
                    move('.section4 img.edition').rotate(-360).end()
                    move('.section4 h4.primary').scale(1).end()
                    move('.section4 h4.sport').scale(1).end()
                    move('.section4 h4.edition').scale(1).end();
                    break;
                default:
                    break;
            }
        },
    })  
})

案例Demo

1、仿魅蓝Note2页面：在线浏览
2、仿Apple Watch页面：在线浏览
3、FullPage.js教程：在线视频