fullpage 入门简述

前几天,偶然看到一个前端工程师的简历.

是一个页面形式的简历.第一次见到把自己的简历能够写成页面的.大部分应聘者的简历全部都是纸质的,没有新意.

我在看到他的简历的时候,我觉得新奇,然后出于我的习惯,我总是会去看法这工具去看开发者写的代码.

然后我看到fullpage.js

我自己才疏学浅,看到fullpage.js这个框架的时候,我就直接去百度了(有啥事我都是找度娘.哈哈哈哈哈~)

然后知道了fullpage.js是一个依于jQuery全屏滚动插件

一个这样简单的fullpage.js插件就能够完成一个全屏滚动的效果,对于我这种懒惰的人来说,这简直就是对我的福利.我当然要学起来.

第一步.我需要先把fullpage需要用到的库下载下来.

第二步.刚才我就说过,fullpage是一个依赖jquery库的一个插件,所以我们也需要准备一个jquery库.但是,我们并不是所有版本的jquery库都能试用.我们需要一个1.7+版本以上的jquery库.

第三步,接下来我们的准备工作已经做好.我们需要准备一个demo.html页面去测试一下.

截图放在这里的时候,我们还不太明白,fullpage不就是一个用来做全屏滚动的吗.他到底都能够做什么.下面这张截图是我在网上看到的他的总的作用.

现在可以看到fullpage总的作用全部放在了里面.

第四步.写布局

在这个布局里面,有一个最大的容器,#fullpage,这个是布局必需要有的容器.容器的名字可以更改(可以改成aa,bb,cc,这只是开个玩笑,起的名字一定要跟内容有关联)

上面那段html代码是最基本的布局.每一个section代表一屏.默认显示的是第一屏.如果我们想指定一下显示的屏幕,我们给相对应的屏添加一个类名(class='active')就可以啦

第五步.写js代码

这里你们肯定很奇怪,我明明库也已经引入了,为什么还要写js代码.

这其实很简单,就相当于是,我们打好了一份饭,就差吃的这个动作.那引到这里应该就明白啦.

这下应该明白我为什么把所有的屏都放在容器里面了吧.