全屏滚动插件fullPage使用教程


经常在各种网站上看到全屏滚动的交互,在网页上实现了类似PPT的效果,很高大上,最近搜索了一下,发现可以实现这个效果的两个插件,但是有一个fullPage插件没有相关API的详细说明,自己在使用的过程中总结一下,写在这里!


有两个插件fullPage.jsfullPage都能实现全屏滚动,名字也是一样的,只是少了“.js”;但是两者的区别在于fullPage.js是基于jQuery库开发的,使用fullPage.js需要先引入jQuery,而fullPage则是原生js开发的,不需要依赖任何一个js库,可以单独使用。功能上虽然不如fullPage.js强大,但一般使用已经足够了,尤其是它的动画效果,你可以自由设定缩放、旋转以产生各种各样的动画效果。同时它还支持fullPage.js所没有的水平滚动。
我这里讲的就是原生fullPage插件的使用。

使用方法

引入文件

使用fullPage插件首先要引入fullPage文件,可以在fullPage官网上进行下载,然后通过script标签引用。

HTML语法

模板

fullPageHTML语法没有什么严格的要求,只是需要一个外层元素,然后每一屏的内容放在一个子元素中,这样顺序排下来就可以,不过最好还是按照官方推荐的格式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="pageContain">
<div class="page page1 current">
<div class="contain">
<!-- your own code here-->
</div>
</div>
<!-- ect.. -->
</div>

<!--alternative-->
<ul id="navBar">
<li>0</li>
<!-- ect.. -->
</ul>
<!--alternative-->

#pageContain就是外层元素,里面的每一个直接子元素都是一屏的内容;
#navBar则是导航标签,用来显示当前屏幕位置和跳转到对应屏幕,可以省略;
.current则是定义当前显示的页面;

data-step页内动画

可以在.pagediv上加上data-step=n属性,可以创造出不切屏的逐桢动画。
原理是滚动鼠标或者滑动页面时,为.page加上一个class属性为step1,滑动一次则增加1,一直增加到n,然后,就可以在CSS里利用animation属性添加动画了。
注意:使用导航条跳转时默认会回到stepx(x为上次浏览到的地方),如果想跳转时重新开始,可以调用callback函数清除掉class:stepx;

CSS

CSS可以自己定义样式,不过fullPage会把外层元素的每个子元素都设置为全屏,而且会可以自适应不同的屏幕。如果是行内元素,则会变为块级元素,且内容会居中。以下是一些必须的样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
html {
-ms-touch-action: none; /* 阻止windows Phone 的默认触摸事件 */
}
body,
div {
margin: 0;
padding: 0;
}
body {
width: 100%;
*cursor: default;
overflow: hidden;
}
#pageContain { /*设置超出页面部分隐藏*/
overflow: hidden;
}
.page { /*设置页面为全屏*/
display: none;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.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;
}
.page1 {
... /*每个页面的样式*/
}
...
.step1 {
... /*每页动画样式*/
}
...
#navBar {
... /*导航样式*/
}
#navBar li {
... /*导航标签样式*/
}
#navBar .active {
... /*导航条激活时的样式*/
}

CSS文件中这些样式是必须的,而且最好不要调整顺序,否则可能会有未知的错误出现。

JavaScript

在JS文件中,则需要按照格式来进行设置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var runPage = new FullPage({
id: 'pageContain', // 父级元素的Id;
slideTime: 800, // 每页切换时间(毫秒);
continuous: false, // 是否循环(即能从最后页跳到第一页面);
effect: { // 切换动画效果;
transform: { //CSS3转换动画;
translate: 'Y', // 'X'|'Y'|'XY'|'none'表示 X轴|Y轴|XY轴|无;
scale: [.1, 1], // [起始缩放比例, 结束时缩放比例];
rotate: [0, 0], // [起始旋转角度, 结束时旋转角度];
},
opacity: [0, 1], // [起始透明度, 结束时透明度];
},
mode: 'wheel,touch,nav:navBar', // 转换模式,表示 '滚轮,触摸,导航条:导航条id';
easing: 'ease', // 动画行进速度;
start: 1, // 初始化时被展示的页面页码;
onSwipeStart : function(index, thisPage) { // 触摸开始时的回调函数;
return 'stop'; //此次触摸将不会生效;
},
beforeChange : function(index, thisPage) { // 滑动开始时的回调函数;
return 'stop'; //此次滑动将还原;
},
callback : function(index, thisPage) { // 滑动结束后的回调函数;
alert(index);
};
});

通过上面的设置基本就可以实现类似幻灯片的网页效果了。

API

属性/方法 类型 默认值 可选值 作用
id string 通过Id获取父级元素(必须)
slideTime int 800 每页切换时间(毫秒)
continuous boolean false true/false 是否循环(最后页跳到第一页)
effect object transform/opacity 切换动画的效果
mode string null wheel,touch,nav:navBar 转换模式,表示’滚轮,触摸,导航条:导航条id
easing string ease/ease-in/ease-in-out/cubic-bezier like [.33, 1.81, 1, 1] 动画行进速度
start int 1 初始化时被展示的页面页码
onSwipeStart function return ‘stop’ 触摸开始时的回调函数(stop停止此次触摸)
beforeChange function return ‘stop’ 滑动开始时的回调函数(stop还原此次滑动)
callback function null 滑动结束后的回调函数

接口

Fullpage也提供了一些接口供开发者调用:

属性/方法 使用 作用
.prev() function 向上滚动一页/一屏
.next() function 向下滚动一页/一屏
.thisPage() function 返回当前的页码
.go(num) function 滚动到第 num 页

结语

fullPage是一个非常简单却又很实用的插件,可以实现很炫酷的ppt效果的网页,而且借口简单,功能强大,文件也很小,才9kb,比起jQueryfullPage.js插件虽然功能上略显逊色,但是强大的自定义属性可以有更多的发挥。

文章目錄
  1. 1. 使用方法
    1. 1.1. 引入文件
    2. 1.2. HTML语法
      1. 1.2.1. 模板
      2. 1.2.2. data-step页内动画
    3. 1.3. CSS
    4. 1.4. JavaScript
  2. 2. API
  3. 3. 接口
  4. 4. 结语
|