全屏视觉差滚动插件-FullPage

说到滚屏插件，我主要接触过touchSwipe和FullPage，两者各有优点吧。就我个人认为，前者更加适合新手，简单，易上手；后者适合高端的开发者。

如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。

今天主要想给大家介绍的是FullPage了，如何实现全屏滚动且实现视觉差效果，至于touchSwipe以后也会讲到。

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

• 支持鼠标滚动

• 支持前进后退和键盘控制

• 多个回调函数

• 支持手机、平板触摸事件

• 支持 CSS3 动画

• 支持窗口缩放

• 窗口缩放时自动调整

• 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

兼容性

jQuery 兼容：

兼容 jQuery 1.7+

浏览器兼容：

IE8/谷歌/火狐/Opera/苹果浏览器

使用方法

1、引入文件：

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

2、HTML：

<div id="article">        
        <div class="page section1 current">
            <div class="contain">
                <h3 class="title">这里是第一竖屏</h3>
                <h4 class="titleEng">This is section1</h4>
            </div>
        </div>
        <div class="page section2">
            <div class="contain">
                <h3 class="title">这里是第二竖屏</h3>
                <h4 class="titleEng">This is section2</h4>
            </div>
        </div>
        <div class="page section3">
            <div class="contain">
                <h3 class="title">这里是第三竖屏</h3>
                <h4 class="titleEng">This is section3</h4>
            </div>
        </div>
        <div class="page section4">
            <div class="contain">
                <h3 class="title">这里是第四竖屏</h3>
                <h4 class="titleEng">This is section4</h4>
            </div>
        </div>
</div>

每个page代表一屏，默认显示“第一屏”，如果要指定加载页面时显示的“屏幕”，可以在对应的 page 加上 class="current”，如：

3、Javascript：

var interval;
runSection = new FullPage({
        id : 'article',                            // id of contain
        slideTime : 800,                               // time of slide
        effect : {                                     // slide effect
            transform : {
                translate : 'Y',                       // 'X'|'Y'|'XY'|'none'
                scale : [0, 1],                       // [scalefrom, scaleto]
                rotate : [0, 0]                       // [rotatefrom, rotateto]
            },
            opacity : [0, 1]                           // [opacityfrom, opacityto]
        },                           
        mode : 'touch,wheel',               // mode of fullpage
        easing : [0, .93, .39, .98],
        callback : function(index, thisPage) {     // callback when pageChange
           clearTimeout(interval);
        }
});

环境配置

1、属性

2、方法

3、回调函数

我们可以看下案例：DEMO