全屏滚动插件fullPage.js教程详解

阅读更多

【前言】

     经常看到一些全屏网站,看着就很高端大气上档次

     现在很多的网站用那种大的图片做背景什么的看起来效果很棒,可以用鼠标滚动条,然后就可以一层一层的往下面翻阅板块,并且带有过渡的动画,如果有导航可以点击导航到相应的板块。传统方法是用a标签的描点写的导航以及对应的相应板块,对于初学者一般也没什么高大上的方法,但是用a标签那只是一下子就到对应的板块去,完全没有过渡的样子,这样看起不太舒服。虽然用js可以弄但是有点麻烦,所以找到了fullPage.js方法。

   想实际操作的话,可以试着使用fullpage.js或 Scrollify 等基于jquery的插件,轻量又很方便

 

【兼容】

   jquery支持jquery 1.7+,浏览器支持IE8+及其他主流浏览器

 

【对比】

   对比Scrollify 和 fullPage.js:

   Scrollify 和 fullPage.js 一样,Scrollify 也是一款基于 jQuery 的全屏滚动插件。跟 fullPage.js 相比,Scrollify 更加小巧,压缩后不足 4KB。但功能上不如 fullPage.js 强大,对移动设备的支持也不如 fullPage.js。不过对于一般的情况,Scrollify 是完全可以胜任的,它支持自定义锚链接、设置过度效果、偏移、是否显示滚动条、回调函数以及 fullPage.js 没有的局部滚动

 

【下载】

    fullPage.js是开源的JQuery插件库,其Github地址:https://github.com/alvarotrigo/fullPage.js

 

【功能】

  ①支持鼠标滚动

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

  ③多个回调函数

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

  ⑤支持 CSS3 动画

  ⑥支持窗口缩放

  ⑦窗口缩放时自动调整

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

 

【用法详解】

(1)文件引入

 ①引入css(注意:引入的css并非给元素设置样式的,元素的样式须要自己写)

    引入的css也就是个库,不是给我们设置css。简单来说就像bootstrap的库用class类这样使用

 ②引入fullPage.js之前,由于fullPage.js是开源的jQuery的所以需要先引入jQuery库

 ③引入脚本文件


 

 (2)建立页面结构

  
第一屏
  
第二屏
  
第三屏
  
第四屏
  
第五屏
  分析:

    ①每一个section都是一个页面,包裹住所有的页面的容器不能是body,可以任意命名一个id包裹住所有的section;

   ②section是一个代码一屏,默认代码是从第一屏开始的。如果要定义从第几屏开始的话的话就加active,这样就是从那个屏开始了;

   ③样式设置:两种方法CSS设置或者JS动态设置

    1. 引入的css并非给元素设置样式的,元素的样式须要自己写,例如

    2. JS动态设置(还有许多其他配置项,比如给多个页面填充不同的背景颜色)

    激活fullPage效果

$(document).ready(function(){
        $('#main_body').fullpage({
            sectionsColor: ['red', 'blue', 'yellow', 'green','purple']
        });   //激活fullpage的效果,可以检查页面看效果了
})

 

(3)子滚动屏

   如果要在某屏中再加入子滚动屏,需要借助slide类,改动上述第二个section例如以下:

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

 

(4)背景屏,CSS设置即可

.section1 { background: url(image/1.jpg) no-repeat 100%;}
.section2 { background: url(image/2.jpg) no-repeat 100%;}

   

(5)循环演示

   ①返回跳跃性循环

loopTop:true,             /* 顶部循环滚动是跳往底部的页面*/
loopBottom:true,           /*  底部循环滚动,同样是跳往页面*/
loopHorizontal:false,      /*  幻灯片循环滚动*/

   ②无间隙循环

continuousVertical:true,

    区别:第一种在页面滑动到最后一页时,在进行滑动的时候,会跳回第一页,是跳跃的,而第二种在页面滑动到最后一页的时候再次滑动会滑回第一页。注意,两种循环方式不能兼而有之 (实际上两种循环方式都使用的话,会显示第一种)

 

 

(6)导航栏

    做全屏滚动网页,实现滚动效果后,首先想到的就是网页右边的导航栏,要实现这个导航栏,fullpage.js插件本身就自带配置项,只要会使用就可以实现效果了

    先介绍几个api:

   ①anchors:定义锚链接,默认值为[],有了锚链接,就可以快速的打开定位到某一页面,也是我们实现导航栏的关键;

   ②lockAnchors:是否锁定锚链接,默认为false,如果设定为true,定义的锚链接,也就是anchors属性就没有效果了;

   ③menu:绑定菜单,设定相关属性与anchors的值相对应后,菜单可以控制滚动,默认为false;

   ④navigation:是否显示导航,默认为false,如果设置为true,会显示小圆点,作为导航;

   ⑤navigationPostion:导航小圆点的位置,可以设置为left或right;

   ⑥navigationTooltips:导航小圆点的tooltips的提示,默认为[],注意按照顺序设置

   【使用fullpage.js插件默认自带的导航栏:

  【自定义导航栏】

    倘若不想用fullpage.js默认的样式效果,还可以自定义样式

HTML:
  
第一屏
  
第二屏
  
第三屏
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;}
$(function() {
            $("#ido").fullpage({
                    continuousVertical: true,  //循环演示
                        //绑定菜单
                         anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'],
                    menu: '#menu',

             });
});

 

自定义Section高度

      网上很多用户说无法自定义底部Footer的高度,我也查阅了很多资料,都没有发现方法,但是无意间看到一个Fullpage的示例,实现自定义底部高度的方法,而且是不算在滑动的Section里面,在需要自定义高度的DIV里面,只需要给Section添加.fp-auto-height类就可以实现自定义高度。

 

 

【拓展】

(1)随意的改变其中一屏的高度

       如果设计别处心裁,最后一屏幕内容装不下,再添加一屏又多余,就是怎么能随意的改变其中一屏的高度,其实很简单,只需要在fullpage方法中添加一个参数:scrollOverflow: true即可。当然不要忘记引入一个 

 

      这样就不用担心内容超出一屏的内容无法显示了。可以在任意一屏随意的溢出并能准确衔接下一屏幕的内容了

(2)内容溢出scrollOverflow:true设置失效问题

      可能原因:(1)js版本不同导致的(2)scrollOverflow单词拼写错误

(3)自定义的导航菜单active添加不上,激活状态失效

      原因:(1)单词拼写错误data-menuanchor写成了data-menuanchors,多了个s

(4)js版本不一样的问题

      当jquery.fullpage.css和jquery.fullpage.js和scrolloverflow.min.js这三个版本一致的时候,我试了几个jq版本也没有出现问题,所以,版本要相同指的是jquery.fullpage.css ,scrolloverflow.min.js, jquery.fullpage.js这几个js相同

(5)最后附上部分API

//配置背景颜色
            sectionsColor:['red','#f04','#9b0','#d3f'],  

            //配置幻灯片切换是否显示箭头,默认true
            controlArrows:false, 

            //配置每页内容页面是否垂直居中,默认false
            verticalCentered:true,

            //配置文字是否随着窗口变化而变化,默认false
            resize:true,

            //配置页面滚动速度,默认700
            scrollingSpeed:1000,

            //配置锚链接,不应该和autoScrolling,scrollBar一起使用
            anchors:['page1','page2','page3','page4'],

            //配置锚点切换时候是否有过度动画,默认true
            animateAnchor:false,

            //锁定配置的锚链接是否显示,默认false
            lokAnchors:true,

            //配置动画由css3还是jquery来执行,默认true
            css3:true,

            //配置滚动到顶部之后是否从底部循环滚动,默认false
            loopTop:true,

            //相反从底部循环滚动,默认false
            loopBottom:true,

            //设置页面是否循环滚动与loopTop,loopBottom不兼容,默认是false
            continuousVertical:true,

            //幻灯片是否循环滚动,默认true
            loopHorizontal:false,

            //配置是否按照插件的方式来进行滚动,默认true,和锚点不应该一起使用,
            一般不设置或者保持默认
            autoScrolling:true,

            //滚动的时候是否包含滚动条,默认false,和锚点不应该一起使用,一般不设
            置或者保持默认
            scrollBar:false,

            //配置页面上下间距,默认0,如果需要设置固定顶部和顶部菜单导航配合使用
            // paddingTop:'300px',
            paddingBottom:0,

            //配置页面是否有固定的DOM
            fixedElements:'#header',

            //配置是否支持键盘方向键控制页面切换,默认true
            keyboardScrolling:true,

            //配置是否激活浏览器前进后退功能,如果页面设置了不按照插件的方式来滚动
              该配置也失效,默认true
            recordHistory:true,

            //配置菜单
            menu:'#fullpageMenu',

            //配置导航,位置,提示,显示当前位置
            navigation:true,
            navigation:'right',
            navigationTooltips:['page1','page2','page3','page4'],
            showActiveTooltip:true,

            //配置幻灯片是否显示导航,和位置
            slidesNavigation:true,
            slidesNavPosition:'bottom',

            //配置内容超过容器是否显示滚动条,模式true,
            scrollOverflow:true,

            //修改section和幻灯片默认CLASS
            sctionSelector:
            slideSelector:

 

 

 

 

 

 

 

.

你可能感兴趣的:(前端插件,CSS,常见特效)