全屏滚动实现：fullPage.js和fullPage-白红宇

全屏滚动实现：fullPage.js和fullPage

阅读量：6995 次

发布时间：2019-06-27

本文共 5573 字，大约阅读时间需要 18 分钟。

fullPage.js和fullPage都能实现全屏滚动，二者区别是：fullPage.js需依赖于JQuery库，而fullPage不需要依赖任何一个js库，可以单独使用。

一、fullPage.js实现全屏

fullPage.js是开源的JQuery插件库，其Github地址：

1、基本演示

1.1 引入文件

1.2 css：引入的css并不是给元素设置样式的，元素的样式需要自己写

1.3 html：每一个section代码一屏，默认从第一屏显示，若需要自定义从某屏开始显示，为section添加active类。示例默认从第三屏显示


        
             
      每一个section是一屏，这是第一屏
    
     
    
             
      每一个section是一屏，这是第二屏
    
     
    
             
      每一个section是一屏，这是第三屏
    
     
    
             
      每一个section是一屏，这是第四屏

1.4 js:

效果：

1.5 可以在某屏中再添加子滚动屏，借助slide类。修改上述第二个section如下：


                
     第二屏的第一屏
            
     第二屏的第二屏
            
     第二屏的第三屏
            
     第二屏的第四屏

1.6 添加背景屏，在html添加两个section


        
     每一个section是一屏，这是第5屏--图片背景
    
        
     每一个section是一屏，这是第6屏--图片背景

添加css

.section5 { background: url(http://idowebok.u.qiniudn.com/77/1.jpg) 50%;}.section6 { background: url(http://idowebok.u.qiniudn.com/77/2.jpg) 50%;}    效果：http://denon-7c931.coding.io/bjfull.html  （滚动到5和6屏）

1.7 循环演示：continuousVertical设置为true

$(function() {    $("#ido").fullpage(        {            continuousVertical: true        });});

效果：（滚动到第6屏，再向下滚动时自动回到第一屏）

1.8 绑定菜单：添加菜单项

添加css

#menu { margin: 0; padding: 0; position: fixed; left: 10px; top: 10px; list-style-type: none; z-index: 70;}#menu li { float: left; margin:  0 10px 0 0; font-size: 14px;}#menu a { float: left; padding: 10px 20px; background-color: #fff; color: #333; text-decoration: none;}#menu .active a { color: #fff; background-color: #333;}

修改js

$(function() {            $("#ido").fullpage(                {                    continuousVertical: true,  //循环演示                        //绑定菜单                         anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'],                    menu: '#menu',                });        });

效果：

1.9 导航演示：设置’navigation': true,

$(function() {            $("#ido").fullpage(                {                    continuousVertical: true,  //循环演示                    //绑定菜单                    anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'],                    menu: '#menu',                    // 导航                    'navigation': true,                });        });

效果：（导航在右侧）

2、配置如图

如果需要配置easing和scrollOverflow，则需要引入额外的js（在vendors目录下）

二、fullPage实现全屏

fullPage 是一款不依赖任何 js 库的全屏滚动组件，支持垂直/水平滚动、CSS3 旋转/缩放动画，支持 IE5.5+，支持移动设备。其Github地址：https://github.com/powy1993/fullpage

1、基本演示

1.1 垂直滚动

css

body {      width: 100%;          *cursor: default;      overflow: hidden;      font: 16px/1.5 "Microsoft YaHei";  }  div,p {      margin: 0;      padding: 0;  }  ul {          list-style: none;  }  #pageContain {      overflow: hidden;  }  .page {      display: none;      width: 100%;      height: 100%;      overflow: hidden;      position: absolute;      top: 0;      left: 0;  }  .contain {      width: 100%;      height: 100%;      display: none;      position: relative;      z-index: 0;  }  .current .contain,.slide .contain {      display: block;  }  .current {      display: block;      z-index: 1;  }  .slide {      display: block;      z-index: 2;  }  .page1 {      background: #37c1e3;  }  .page2 {      background: #009922;  }  .page3 {      background: #992211;  }  .page4 {      background: #ff00ff;  }  .page5 {      background: #00ff00;  }  .page6 {      background: #22ffff;  }  #navBar {      z-index: 3;      position: absolute;      top: 10%;      right: 3%;  }  #navBar .active {      background: #ccc;  }  #navBar li {      cursor: pointer;      margin-bottom: 10px;      transition: all .7s ease;      border-radius: 50%;      line-height: 40px;      text-align: center;      width: 40px;      height: 40px;  }h1 {     text-align: center;     margin-top: 20%; }

html

var runPage;runPage = new FullPage({    id: 'pageContain',    slideTime: 800,    effect: {        transform: {            translate: 'Y'    //垂直滚动，改为X则是水平滚动        },        opacity: [0, 1]    },    mode: 'wheel, touch, nav:navBar',    easing: 'ease'});

效果：

1.2 css3动画：修改js就行

var runPage;runPage = new FullPage({    id: 'pageContain',    slideTime: 800,    effect: {        transform: {           translate: 'X',           scale: [0, 1],    rotate: [270, 0]        },        opacity: [0, 1]    },    mode: 'wheel, touch, nav:navBar',    easing: 'ease'});

效果：

1.3 自动滚动，js修改如下

var runPage, interval, autoPlay;    autoPlay = function(to) {        clearTimeout(interval);        interval = setTimeout(function() {            runPage.go(to);        }, 1000);    }    runPage = new FullPage({        id: 'pageContain',        slideTime: 800,        effect: {            transform: {               translate: 'X',               scale: [0, 1],        rotate: [270, 0]            },            opacity: [0, 1]        },        mode: 'wheel, touch, nav:navBar',        easing: 'ease',        callback: function(index, thisPage){        index = index + 1 > 3 ? 0 : index + 1;        autoPlay(index);         }    });    interval = setTimeout(function() {            runPage.go(runPage.thisPage() + 1);        }, 1000);

效果：