全屏滚动插件fullPage教程详解

【前言】

   之前介绍了全屏滚动插件 fullPage.js，也用该插件制作了一些例子。今天介绍另一款全屏滚动组件，名字也叫 fullpage，只是少了 “.js”

 

【对比】

fullPage.js与fullPage对比：

      与 fullPage.js 相比，fullpage 不依赖任何 js 库，可独立使用。功能上虽然不如 fullPage.js 强大，但一般使用已经足够了，尤其是它的动画效果，你可以自由设定缩放、旋转以产生各种各样的动画效果。同时它还支持 fullPage.js 所没有的水平滚动

 

【详解】

一、下载代码

在 https://github.com/powy1993/fullpage 下载源代码

 

二、构建网页，引入相关文件

1、新建html页面，如果是移动端看的话，需要在页面头部插入视口说明：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, 
 maximum-scale=1, user-scalable=no">

2、引入 fullPage.min.js 文件。

<script src="http://www.dowebok.com/fullPage.min.js"></script>

三、写出你要分几屏的html结构，并配上样式

1、在页面里写出你要分几屏的html代码，并把他们都套在一个层内，假设你要分2屏，如下：

<div id="pageContain">
    <div class="page page1 current">
        <div class="contain">
            <p class="txt">第一屏</p>
        </div>
    </div>
    <div class="page page2">
        <div class="contain">
            <p class="txt">第二屏</p>
        </div>
    </div>
</div>

 2、为这个结构配上样式，如下:

#pageContain { overflow: hidden; }
.page { display: none; overflow: hidden; position: absolute; top: 0; left: 0; 
       width: 100%; height: 100%; max-width:76.8rem; }
.contain { display: none; position: relative; z-index: 0; width: 100%; height: 100%; }
.current .contain,.slide .contain { display: block; }
.current { display: block; z-index: 1; }
.slide { display: block; z-index: 2; }
.swipe { display: block; z-index: 3; transition-duration: 0ms !important; 
         -webkit-transition-duration: 0ms !important; }
#navBar { display:none;}

 

四、写入JavaScript启动代码

<script>
$(window).load(function() {
var runPage;
runPage = new FullPage({
    id : 'pageContain',                            // id of contain
    slideTime : 800,                               // time of slide
    continuous : false,                            // create an infinite feel with no endpoints
    effect : {                                     // slide effect
            transform : {
                translate : 'Y',                   // 'X'|'Y'|'XY'|'none'
                scale : [.1, 1],                   // [scalefrom, scaleto]
                rotate : [270, 0]                      // [rotatefrom, rotateto]
            },
            opacity : [0, 1]                       // [opacityfrom, opacityto]
        },                           
    mode : 'wheel,touch,nav:navBar',               // mode of fullpage
    easing : 'ease'                                // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1];
});
});
</script>

 

如果不用jquery，可以用js的写法代替$选择符：window.onload=function(){｝

最后提醒一下，一定不要忘记写上分页导航列表，缺少这个列表就不起作用了，可以用样式隐藏它

<ul id="navBar">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

 

 

 

 

 

 

.