滚屏插件-fullPage.js的用法-一一网

一、什么是fullPage.js？

这是我参与新手入门的第1篇文章, 我主要用于官网,H5制作全屏效果,不过它支持鼠标滚动、支持前进后退和键盘控制、多个回调函数、支持手机、平板触摸事件、支持 CSS3 动画、支持窗口缩放、窗口缩放时自动调整、可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等.

二、fullPage.js使用方式

既可以以jQuery形式使用,也可以以Vue.js形式使用,下面我以jQuery形式使用

设置每一屏幕需要带有类型section,而active类是指定进入页面跳转哪一屏幕

<link rel="stylesheet" href="./css/jquery.fullPage.css">
<div id="box">
    <div class="section">section1</div>
    <div class="active section">section2</div>
    <div class="section">section3</div>
    <div class="section">section4</div>
</div>
复制代码

快速开始, 文档加载后执行函数,初始化Fullpage配置信息

<script src="./public/jquery-1.8.3.min.js"></script>
<script src="./public/jquery.fullPage.js"></script>
<script>
// jQuery 初始化 fullpage
$(document).ready(function() {
    $('#box').fullpage({
        //options here
        autoScrolling:true,
        scrollHorizontally: true
    });

    //methods
    $.fn.fullpage.setAllowScrolling(false);
});
</script>
复制代码

这里有详细的其他配置选项需要了解,都写在注释里了

$(document).ready(function() {
  $('#fullpage').fullpage({
    // Navigation
    menu: false,  //绑定菜单，设定的相关属性与anchors的值对应后，菜单可以控制滚动，默认为false。
    anchors:['firstPage', 'secondPage'],  //anchors定义锚链接，默认为[]
    lockAnchors: false,  //是否锁定锚链接，默认为false,设为true后链接地址不会改变
    navigation: false,  //是否显示导航，默认为false
    navigationPosition: 'right',  //导航小圆点的位置
    navigationTooltips: ['firstSlide', 'secondSlide'],  //导航小圆点的提示
    showActiveTooltip: false,  //是否显示当前页面的tooltip信息
    slidesNavigation: true,  //是否显示横向幻灯片的导航，默认为false
    slidesNavPosition: 'bottom',  //横向导航的位置，默认为bottom，可以设置为top或bottom
        
    // Scrolling
    css3: true,  //是否使用CSS3 transforms来实现滚动效果，默认为true
    scrollingSpeed: 700,  //设置滚动速度，单位毫秒，默认700
    autoScrolling: true,  //是否使用插件的滚动方式，默认为true,若为false则会出现浏览器自带滚动条
    fitToSection: true,  //设置是否自适应整个窗口的空间，默认值：true
    scrollBar: false,  //是否包含滚动条，默认为false,若为true浏览器自带滚动条出现
    easing: 'easeInOutCubic',  //定义页面section滚动的动画方式，若修改此项需引入jquery.easing插件
    easingcss3: 'ease',  //定义页面section滚动的过渡效果，若修改此项需引入第三方插件
    loopBottom: false,  //滚动到最低部后是否连续滚动到顶部，默认为false
    loopTop: false,  //滚动到最顶部后是否连续滚动到底部，默认为false
    loopHorizontal: true,  //横向slide幻灯片是否循环滚动，默认为true
    continuousVertical: false,  //是否循环滚动，不兼容loopTop和loopBottom选项
    normalScrollElements: '#element1, .element2',  //避免自动滚动，滚动时的一些元素，例如百度地图
    scrollOverflow: false,  //内容超过满屏后是否显示滚动条，true则显示滚动条，若需滚动查看内容还需要jquery.slimscroll插件的配合
    touchSensitivity: 15,  //在移动设备中滑动页面的敏感性，默认为5最高100，越大越难滑动
    normalScrollElementTouchThreshold: 5,
      
    // Accessibility
    keyboardScrolling: true,  //是否可以使用键盘方向键导航，默认为true
    animateAnchor: true,  //锚链接是否可以控制滚动动画，默认为true,若为false则锚链接定位失效
    recordHistory: true,  //是否记录历史，默认为true,浏览器的前进后退可导航。若autoScrolling:false,那么这个属性将被关闭
      
    // Design
    controlArrows: true,  //定义是否通过箭头来控制slide,默认true
    verticalCentered: true,  //定义每一页的内容是否垂直居中，默认true
    resize : false,  //字体是否随窗口缩放而缩放，默认false
    sectionsColor : ['#ccc', '#fff'],  //为每个section设置background-color属性
    paddingTop: '3em',设置每一个section顶部的padding,默认为0
    paddingBottom: '10px',设置每一个section底部的padding,默认为0
    fixedElements: '#header, .footer',固定元素，默认为null,需要配置一个jquery选择器，在页面滚动时，fixElements设置的元素不滚动
    responsiveWidth: 0,
    responsiveHeight: 0,
      
    // Custom selectors
    sectionSelector: '.section',  //section选择器。默认为.section
    slideSelector: '.slide',  //slide选择器，默认为.slide
      
    // events
    onLeave: function(index, nextIndex, direction){},
    afterLoad: function(anchorLink, index){},
    afterRender: function(){},
    afterResize: function(){},
    afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
    onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
  });
});
复制代码

三、fullPage.js过场动画

全屏加载是可以使用wow.js配合使用,在滚屏或离开添加animate.css动画样式,并初始化wow,data-wow-duration设置动画时长 data-wow-delay设置几时开始动画,下面是我的使用方式和常用配置,

html代码

<link rel="stylesheet" href="./css/jquery.fullPage.css">
<link rel="stylesheet" href="./css/animate.css">

<div id="box">
  <div class="section">section1</div>
  <div class="section">
    <h1 class="wow bounceIn" data-wow-duration="1.5s" data-wow-delay="0.3s">section2</h1>     
  </div>
  <div class="section">section3</div>
  <div class="section">section4</div>
</div>
复制代码

javascript代码

<script src="./public/jquery-1.8.3.min.js"></script>
<script src="./public/jquery.fullPage.js"></script>
<script src="./public/wow.min.js"></script>
<script>
$('.box').fullpage({
  controlArrows: false, // 用来控制slide幻灯片的箭头，设置为false，两侧的箭头会消失
  verticalCentered: true,//每一页幻灯片的内容是否垂直居中
  // 滚动
  css3: false,
  scrollingSpeed: 700,
  continuousVertical: false,   // 是否循环滚动，与 loopTop 及 loopBottom 不兼容
  autoScrolling: true,
  navigation:true,
  anchors:["s1","s2","s3","s4","s5",],
  scrollBar:false,
  afterRender:function(){
    // 页面结构生成后的回调函数，或者说页面初始化完成后的回调函数
  },
  afterLoad: function(anchorLink,index){
    // 滚动到某一屏后的回调函数，anchorLink 是锚链接的名称，index 是序号，从1开始计算
    if ( index != 0) {
      var wow = new WOW({
        boxClass: 'wow',          // 需要执行动画的元素的 class
        animateClass: 'animated', // animation.css 动画的 class
        offset: 0,                // 距离可视区域多少开始执行动画 init
        mobile: true,             // 是否在移动设备上执行动画
        live: true                // 异步加载的内容是否有效
      });
      wow.init();
    }
  },
  onLeave(index,nextIndex,direction){
    // 离开当屏
  }
});
</script>
复制代码