# 前言

之前一直很喜欢全屏滚动翻页的网站(单页网站),但是一直都不知道怎么写。
直到我发现了 fullPage.js ,这是一个非常好用的 js 插件,可以快速创建全屏滚动网站。

# 开始

# 下载

fullPage.js 下载地址
或者使用 bower 与 npm:

DownloadGitHub下载戳此
// 使用 bower
bower install fullpage.js
// 使用 npm
npm install fullpage.js

如果倾向使用 CDN 载入文件,可使用 CDN:fullPage.js 在 CDNJS

demo 示例
MoeQY 示例(新主页)

fullPage.js 允许非商业性质使用,如需商业使用请查看 fullpage 商业许可证

# 使用

# 载入文件

载入文件
<link rel="stylesheet" type="text/css" href="fullpage.css" />
<!-- 以下行是可选的。 只有在使用选项 css3:false ,并且您希望使用其他缓动效果,而非 linear 、 swing 或 easeInOutCubic 时才有必要。 -->
<script src="vendors/easings.min.js"></script>
<!-- 以下行仅在使用选项 scrollOverflow:true 的情况下是必需的 -->
<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="fullpage.js"></script>

# 基本 html 格式介绍:

首行 html 代码必须使用 HTML DOCTYPE 声明,即 <!DOCTYPE html>

基本格式
<div id="fullpage"> <!-- fullpage 的封装 -->
	<div class="section">Some section</div> <!-- "section" 单个页面 -->
		<div class="slide"> slide 1 </div> <!-- "slide" 横向滑动页面 / 子页面 -->
		<div class="slide"> slide 2 </div>
		<div class="slide"> slide 3 </div>
		<div class="slide"> slide 4 </div>
	<!-- 默认第一页为初始页面(主页) -->
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
</div>

如果想要定义一个新的初始页面,而不是默认的第一个滑动页。只需要在你想要的页面里添加 active

定义新的初始页面
<div class="section active">Some section</div>

# 初始化

在结束 </body> 前调用 fullPage.js:

使用js调用fullPage
new fullpage('#fullpage', {
	//options here
	autoScrolling:true,
	scrollHorizontally: true
});
//methods
fullpage_api.setAllowScrolling(false);

或者使用当作 jQuery 插件进行初始化:

使用jQuery调用fullPage
$(document).ready(function() {
	$('#fullpage').fullpage({
		//options here
		autoScrolling:true,
		scrollHorizontally: true
	});
	//methods
	$.fn.fullpage.setAllowScrolling(false);
});

# 更多初始化选项

查看 fullpage 的自定义选项

fullPage自定义选项
var myFullpage = new fullpage('#fullpage', {
	// 导航
	menu: '#menu',
	lockAnchors: false,
	anchors:['firstPage', 'secondPage'],
	navigation: false,
	navigationPosition: 'right',
	navigationTooltips: ['firstSlide', 'secondSlide'],
	showActiveTooltip: false,
	slidesNavigation: false,
	slidesNavPosition: 'bottom',
	// 滚动
	css3: true,
	scrollingSpeed: 700,
	autoScrolling: true,
	fitToSection: true,
	fitToSectionDelay: 1000,
	scrollBar: false,
	easing: 'easeInOutCubic',
	easingcss3: 'ease',
	loopBottom: false,
	loopTop: false,
	loopHorizontal: true,
	continuousVertical: false,
	continuousHorizontal: false,
	scrollHorizontally: false,
	interlockedSlides: false,
	dragAndMove: false,
	offsetSections: false,
	resetSliders: false,
	fadingEffect: false,
	normalScrollElements: '#element1, .element2',
	scrollOverflow: false,
	scrollOverflowReset: false,
	scrollOverflowOptions: null,
	touchSensitivity: 15,
	bigSectionsDestination: null,
	// 可访问
	keyboardScrolling: true,
	animateAnchor: true,
	recordHistory: true,
	// 布局
	controlArrows: true,
	verticalCentered: true,
	sectionsColor : ['#ccc', '#fff'],
	paddingTop: '3em',
	paddingBottom: '10px',
	fixedElements: '#header, .footer',
	responsiveWidth: 0,
	responsiveHeight: 0,
	responsiveSlides: false,
	parallax: false,
	parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
	dropEffect: false,
	dropEffectOptions: { speed: 2300, color: '#F82F4D', zIndex: 9999},
	waterEffect: false,
	waterEffectOptions: { animateContent: true, animateOnMouseMove: true},
	cards: false,
	cardsOptions: {perspective: 100, fadeContent: true, fadeBackground: true},
	// 自定义选择器
	sectionSelector: '.section',
	slideSelector: '.slide',
	lazyLoading: true,
	// 事件
	onLeave: function(origin, destination, direction){},
	afterLoad: function(origin, destination, direction){},
	afterRender: function(){},
	afterResize: function(width, height){},
	afterReBuild: function(){},
	afterResponsive: function(isResponsive){},
	afterSlideLoad: function(section, origin, destination, direction){},
	onSlideLeave: function(section, origin, destination, direction){}
});

# 页面链接

如果想要给页面添加一个锚点链接,可以在初始化选项中选择 anchors 或者属性 data-anchor

初始化选项
new fullpage('#fullpage', {
	anchors:['第一页名称', '第二页名称', '第三页名称']
});

类似子页面的链接会显示为 #页面名称/2 ,如果需要自定义此类锚点,请在 html 标记中使用属性 data-anchor

属性
<div class="section">
	<div class="slide" data-anchor="slide1"> slide 1 </div>
	<div class="slide" data-anchor="slide2"> slide 2 </div>
</div>

像这样标记,链接将会显示为 #页面名称/slide 1#页面名称/slide 2

如果没有在初始化选项中使用 anchors , 依旧可以在 html 中使用 data-anchor

# 创建不同大小的页面

fullPage.js 创建的页面初始大小是固定的,但是插件提供了一种办法可以删除全屏高度限制:
在单个页面的 html 标记中添加 fp-auto-height 即可自动适应你创建的高度。

l 自动高度
<div class="section fp-auto-height">自动高度</div>

这个功能非常适合使用于页脚 (footer),能让你的页脚完美嵌入你的页面中。

# 其他功能

fullPage.js 还有许多功能,在这里我只记录自己认为有用的功能
更多功能请查看官方的 GitHub 文档

# 懒加载

fullPage.js 提供了一种延迟加载图像、视频和音频元素的方式。以此达到不减慢网站加载速度,也不会浪费数据传输。
当使用懒加载时,这些元素只有在进入视口时才会加载。
启动懒加载,只需要将 src 属性替换为 data-src

懒加载
<img data-src="image.png">
<video>
	<source data-src="video.webm" type="video/webm" />
	<source data-src="video.mp4" type="video/mp4" />
</video>

文章参考:
https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese#fullpagejs | GitHub,fullPage.js by alvarotrigo
https://alvarotrigo.com/fullPage/ | fullPage,示例

更新于 阅读次数