最好用最强大的全屏滚动插件最好用最强大的全屏滚动插件是哪个

简介

fullPage.js可轻松创建全屏滚动网站(也称为单页网站),同时也可在网站中添加横向滚动条,很多的官方和设计网站都会使用到它

目前github的star量33.1K

中文官网:https://alvarotrigo.com/fullPage/zh/
github地址:https://github.com/alvarotrigo/fullPage.js

效果预览

1、PC电脑端

电脑端效果

2、手机移动端

手机移动端效果

兼容性

fullPage.js 兼容所有的现代浏览器,以及一些旧版浏览器,如 Internet Explorer 9,Opera 12 等都能兼容。 可兼容支持 CSS3 的浏览器与非支持 CSS3 的浏览器,适用于旧版浏览器。 同时,手机、平板电脑和触摸屏电脑还提供触屏支持。

安装

// 通过npm安装下载
// 或直接去官网下载源码
npm i fullpage.js -S
// 样式文件

// js文件

使用

// 每段定义为包含 section 类的元素
// section里就写你要展示的内容
// 默认情况下,第一个 section 代码段,将被视为主页
// 代码段应放在一个div包装(即 )
// 包装的div不能是 body 元素
Some section
Some section
Some section
Some section

// 如果不想第一段为起始页
// 只需将 active 类添加到你想首先载入的段
Some section

// 为在代码段中创建横向滑块
// 在section中再嵌套slide就行
slide 1
slide 2
slide 3
slide 4

// js初始化
new fullpage('#fullpage', {
// 是否自动滚动
autoScrolling:true,
// 是否支持横向滚动
scrollHorizontally: true
});

常用配置项

new fullpage('#fullpage', {
// 是否自动滚动
autoScrolling:true,
// 是否支持横向滚动
scrollHorizontally: true,
// 滚动转换的速度(以毫秒为单位)
scrollingSpeed:700,
// 在 section 内部垂直居中
verticalCentered:true,
// section 定义 CSS background-color 属性
sectionsColor:none,
});

常用方法

new fullpage后,就可以拿到一个实例,这个实例可以调用方法

const fullPage = new fullpage('#fullpage',{})
// 向上滚动一个 section
fullPage.moveSectionUp()
// 向下滚动一个 section
fullPage.moveSectionDown()
//滚动到网站的第三个section
fullPage.moveTo(3, 0)

常用回调函数

我们也可以监听一些常用的回调函数来做一些处理

new fullpage('#fullpage', {
// 一屏滚动结束之后
// origin前一个section
// destination进入的section
afterLoad: function(origin,destination){
const loadedSection = this;
//使用 index
if(origin.index == 2){
alert("第3个section停止加载");
}
},
// 离开 section
// origin前一个section
// destination进入的section
onLeave: function(origin,destination){
const leavingSection = this;
//离开第二个section后
if(origin.index == 1){
alert("前往第3个section!");
}
else if(origin.index == 1){
alert("前往第1个section!");
}
}
});

好了,就介绍到这里了,如果想详细了解的话,可以去中文官方文档看看

觉得效果不错的请帮忙加个关注点个赞,经常分享前端实用开发技巧

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注