最好用最强大的全屏滚动插件(最好用最强大的全屏滚动插件是哪个)
简介
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！");
}
}
});
好了，就介绍到这里了，如果想详细了解的话，可以去中文官方文档看看
觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧
