# 前言
之前一直很喜欢全屏滚动翻页的网站（单页网站），但是一直都不知道怎么写。
直到我发现了 fullPage.js ，这是一个非常好用的 js 插件，可以快速创建全屏滚动网站。
# 开始
# 下载
fullPage.js 下载地址 。
或者使用 bower 与 npm：
// 使用 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：
new fullpage('#fullpage', { | |
//options here | |
autoScrolling:true, | |
scrollHorizontally: true | |
}); | |
//methods | |
fullpage_api.setAllowScrolling(false); |
或者使用当作 jQuery 插件进行初始化：
$(document).ready(function() { | |
$('#fullpage').fullpage({ | |
//options here | |
autoScrolling:true, | |
scrollHorizontally: true | |
}); | |
//methods | |
$.fn.fullpage.setAllowScrolling(false); | |
}); |
# 更多初始化选项
查看 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 即可自动适应你创建的高度。
<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> |
