全屏滚动插件fullPage.js
效果效果
本文介绍使用fullPage.js插件可轻易创建全屏滚动网站。很多网站只有一个首页，它是由多个可以滚动的全屏内容组成，使用鼠标滚动或方向键可控制滚屏，支持CSS3动画和手机触屏，效果非常高大上。
使用方法
包含文件
<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>如果您愿意，可以使用bower或npm安装fullPage.js：
// 使用bower
bower install fullpage.js
// 使用npm
npm install fullpage.jsHTML结构
HTML文件中的首行HTML代码必须使用HTML DOCTYPE 声明，否则可能会遇到代码段高度问题。HTML 5 doctype中的示例：
<!DOCTYPE html>。
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>每个代码段定义为包含.section的元素。 第一个代码段作为第一屏，是默认激活。 代码段应被包含在(即<div id="fullpage"> )父元素中。 注意，父元素不能是body元素。
如果你想定义一个与众不同的起始页面，而不是原始第一段或第一个滑动页，只需将.active类添加到你想首先载入的段或滑动页。
<div class="section active">Some section</div>Javascript
用原生Javascript初始化，只需要在关闭标签之前调用fullPage.js。
new fullpage('#fullpage', {
//options here
autoScrolling:true,
scrollHorizontally: true
});
//methods
fullpage_api.setAllowScrolling(false);也可以使用jQuery进行初始化，前提需要先引用jQuery库。
$(document).ready(function() {
$('#fullpage').fullpage({
//options here
autoScrolling:true,
scrollHorizontally: true
});
//methods
$.fn.fullpage.setAllowScrolling(false);
});功能选项
所有选项设置的更复杂的初始化如下所示：
var myFullpage = new fullpage('#fullpage', {
//导航
menu: '#menu', //绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动
lockAnchors: false, //(默认为false)确定URL中的锚是否在库中完全有效。 您仍然可以在函数和回调内部使用锚，但是它们在滚动网站时不起任何作用。 如果你想在URL中使用锚点来将fullPage.js和其他插件结合起来，那就很有用。
anchors:['firstPage', 'secondPage'], //定义要在每个部分的URL上显示的锚链接(#example)。 锚点的值应该是独一无二的。 数组中的锚的位置将限定锚被应用于哪些部分。
navigation: false, //如果设置为true，则会显示一个由小圆圈组成的导航栏
navigationPosition: 'right', //(默认none)可以设置为left或right，并定义导航栏显示的位置(如果使用的话)
navigationTooltips: ['firstSlide', 'secondSlide'], //(默认为[])定义要使用导航圈的工具提示。 如果您愿意，也可以在每个部分中使用属性data-tooltip来定义它们
showActiveTooltip: false, //显示垂直导航中主动查看节的持久工具提示
slidesNavigation: false, //如果设置为true，则会显示一个导航栏，该导航栏由站点上每个横向滑块的小圆圈组成。
slidesNavPosition: 'bottom', //定义滑块的横向导航栏的位置。 值为top和bottom。
//滚动
css3: true, //是否使用 CSS3 transforms 滚动
scrollingSpeed: 700, //滚动速度，单位为毫秒
autoScrolling: true, //是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条
fitToSection: true, //确定是否section放入视窗中
fitToSectionDelay: 1000, //如果fitToSection设置为true，则延迟 以毫秒为单位
scrollBar: false, //确定是否使用站点的滚动条。 在使用滚动条的情况下，autoScrolling功能仍将按预期工作。 用户也可以使用滚动条自由滚动网站，当滚动完成时，fullPage.js将适配屏幕上的部分。
easing: 'easeInOutCubic', //定义用于垂直和水平滚动的过渡效果。
easingcss3: 'ease', //定义在使用css3：true的情况下使用的过渡效果。
loopBottom: false, //滚动到最底部后是否滚回顶部
loopTop: false, //滚动到最顶部后是否滚底部
loopHorizontal: true, //定义水平滑块是否在到达上一张或上一张幻灯片后循环
continuousVertical: false, //是否循环滚动，与 loopTop 及 loopBottom 不兼容
normalScrollElements: '#element1, .element2', //如果你想在滚动某些元素时避免自动滚动，这是你需要使用的选项
scrollOverflow: false, //内容超过满屏后是否显示滚动条
touchSensitivity: 15, //定义浏览器窗口宽度/高度的百分比，以及滑动到下一个节/幻灯片必须测量的距离
normalScrollElementTouchThreshold: 5, //定义html节点树的跳数阈值Fullpage将测试normalScrollElements是否匹配，以允许在触摸设备上的div的滚动功能。
bigSectionsDestination: null, //定义如何滚动到比视口大的部分。 默认情况下，如果您来自目的地上方的部分，fullPage.js将滚动到顶部，如果您来自目的地之下的部分，则会滚动到底部。 可能的值是top，bottom，null。
//可访问
keyboardScrolling: true, //定义是否可以使用键盘浏览内容
animateAnchor: true, //定义给定锚点(＃)的站点的负载是否会随着动画滚动到其目的地或直接加载给定部分
recordHistory: true, //定义是否将网站的状态推送到浏览器的历史记录。 设置为true时，网站的每个部分/幻灯片将作为新页面，浏览器的后退和前进按钮将滚动部分/幻灯片以达到网站的上一个或下一个状态。 当设置为false时，URL将保持更改，但不会影响浏览器的历史记录。 使用autoScrolling：false时，该选项会自动关闭。
//设计
controlArrows: true, //确定是否将幻灯片的控制箭头向右或向左移动
verticalCentered: true, //在段落内部垂直居中。 当设置为true时，您的代码将被库包装。可考虑使用委托或在afterRender回调中加载其他脚本
sectionsColor : ['#ccc', '#fff'], //为每个部分定义CSSbackground-color属性
paddingTop: '3em', //与顶部的距离
paddingBottom: '10px', //与底部距离
fixedElements: '#header, .footer', //定义当使用css3选项保持固定时，哪些元素将从插件的滚动结构中移除。 它需要一个字符串与这些元素的Javascript选择器。 (例如：fixedElements：'＃element1，.element2')
responsiveWidth: 0, //一个正常的滚动(autoScrolling：false)将在定义的宽度下以像素为单位使用。 如果用户希望将自己的响应式CSS用于身体标记，则会将fp-responsive类添加到身体标记中。 例如，如果设置为900，则每当浏览器的宽度小于900时，插件将像正常站点一样滚动。
responsiveHeight: 0, //一个正常的滚动(autoScrolling：false)将在定义的高度下以像素为单位使用。 如果用户希望将自己的响应式CSS用于身体标记，则会将fp-responsive类添加到身体标记中。 例如，如果设置为900，则每当浏览器的高度小于900时，插件将像正常站点一样滚动。
//自定义选择器
sectionSelector: '.section', //定义用于插件部分的Javascript选择器。 有时可能需要更改，以避免与使用与fullpage.js相同的选择器的其他插件的问题。
slideSelector: '.slide', //定义用于插件幻灯片的Javascript选择器。 有时可能需要更改，以避免与使用与fullpage.js相同的选择器的其他插件的问题。
lazyLoading: true, //延迟加载默认是激活的，这意味着它会延迟加载包含属性data-src的任何媒体元素
//事件
onLeave: function(index, nextIndex, direction){},//滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算；nextIndex 是滚动到的“页面”的序号，从1开始计算；direction 判断往上滚动还是往下滚动，值是 up 或 down。
afterLoad: function(origin, destination, direction){}, //滚动结束之后，一旦加载了节，就会触发回调。
afterRender: function(){}, //这个回调在页面结构生成后立即被触发。 这是您要用来初始化其他插件的回调函数，或者触发任何需要文档准备就绪的代码
afterResize: function(width, height){},//调整浏览器窗口大小后，会触发此回调。
afterResponsive: function(isResponsive){}, //在fullpage.js从正常模式变为响应模式或从响应模式变为正常模式之后，此回调将被触发
afterSlideLoad: function(section, origin, destination, direction){}, //滚动结束后，加载一个section的幻灯片后触发回调。
onSlideLeave: function(section, origin, destination, direction){} //一旦用户离开幻灯片转到另一个幻灯片，就会触发此回调。返回false将在移动发生之前取消移动。
});
方法
moveSectionUp() 向上滚动
moveSectionDown() 向下滚动
moveTo(section, slide) 滚动到
moveSlideRight() slide 向右滚动
moveSlideLeft() slide 向左滚动
setAutoScrolling() 设置页面滚动方式，设置为 true 时自动滚动
setAllowScrolling() 添加或删除鼠标滚轮/触控板控制
setKeyboardScrolling() 添加或删除键盘方向键控制
setScrollingSpeed() 定义以毫秒为单位的滚动速度其他
延迟加载
fullPage.js提供了一种延迟加载图像、视频和音频元素的方式，这样它们不会减慢网站的加载速度，也不会浪费数据传输。 当使用延迟加载时，所有这些元素只有在进入视口时才会加载。 要启用延迟加载，您只需将src属性更改为data-src，如下所示：
<img data-src="data:image.png">
<video>
<source data-src="video.webm" type="video/webm" />
<source data-src="video.mp4" type="video/mp4" />
</video>如果您已经使用另一个使用data-src的延迟加载解决方案，则可以通过设置 lazyLoading: false选项来禁用fullPage.js延迟加载。
自动播放
对于视频或音频使用属性 autoplay，或者对于youtube iframe使用参数autoplay=1将使得在加载页面时播放媒体元素。 在段落/幻灯片载入使用而不是属性data-autoplay播放。 例如：
<audio data-autoplay>
<source src="http://metakoncept.hr/horse.ogg" type="audio/ogg">
</audio>暂停
嵌入式HTML5<video>/<audio>和Youtube iframe在离开某个段落或幻灯片时自动暂停。 可以通过使用属性data-keepplaying来禁用。 例如：
<audio data-keepplaying>
<source src="http://metakoncept.hr/horse.ogg" type="audio/ogg">
</audio>此外，fullpage.js还可以使用扩展插件，更多详情请查看fullpage.js项目官网：https://github.com/alvarotrigo/fullPage.js.
相关文章：
- fullpage的基本使用方法
- 使用plotly对美国疫情地图可视化
- 美国选民喜好#
- php地图打点,php – 点击地图后获取地址
- R语言绘制美国疫情地图（可交互式）
- 使用matlab绘制地图
- tableau地图城市数据_Tableau 中的地图工作区
- Google Earth Engine（GEE）——计算不同美国州的气温折线图和散点图
- [C++]美国地图着色问题C++实现
- 13行Python代码画美国疫情地图
- 13行Python代码画美国疫情地图！美国现在可怕哇！
- 绘制简单的美国疫情地图（plotlty+request）
- 【归档】[D3] 地图可视化——美国地图
- 美国地图
- 美国各州地图
- 我的世界java雪村种子_我的世界：矿洞和村庄的种子已经过时了，这个冰雪世界了解下？...
- 新库上线 | CnOpenData中国种子进出口信息数据
- 我的世界神级种子Java_我的世界：老玩家推荐的神级种子，资源丰富，光是钻石就有47颗！...
- 我的世界java1.16.3村庄种子,我的世界：1.16最神奇的种子，自然生成的石头雕像，基岩能用！...
- 我的世界奇葩种子java_我的世界：10个最新版奇葩种子，老玩家：天选之子才能拥有这待遇...
- [c#][福利]BTTool种子文件修改工具
- 对接亚马逊（amazon）demo
- 利用 JS 脚本实现网页全自动秒杀抢购
- 亚马逊（脚本）自动化软件开发案例过程
- vue项目自动化部署到亚马逊S3或者阿里云OSS或者服务器
- linux——自动发送邮件
- 使用 Amazon Config Rules 自动执行 Amazon S3 版本控制
- 【地表最强】亚马逊Amazon高性能爬虫
- Ceph实战（十一）：重磅！！！一键部署集群的脚本
- centos mongodb一键安装脚本
全屏滚动插件fullPage.js相关推荐
- jQuery全屏滚动插件 Fullpage.js 及 move.js
Fullpage.js 引入文件 <link rel="stylesheet" href="css/jquery.fullPage.css"> &l ...
- 拥抱单页网站! jQuery全屏滚动插件fullPage.js
不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...
- Jquary全屏滚动插件fullpage.js的使用
1. fullpage.js的主要功能 fullPage.js是一个基于jquery的插件,它能很方便的制作出全屏网站 2.引包 CDNJS地址: https://cdnjs.com/librarie ...
- html页面左右滑动固定插件,jQuery全屏滚动插件fullPage.js让你的页面分屏滚动
随着扁平化风格的日益流行,越来越多的网页越来越简单但又看上去高大上,比如小米.魅族.苹果等等知名站点的新品页面,以及360.百度等网站的专题页面越来越采用分屏滚动的风格. 当然实现这种风格的方法有多种 ...
- jQuery全屏滚动插件fullPage.js
演 示 下 载 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),Q ...
- 前端jQuery的全屏滚动插件（使用方法）
全屏滚动:无滚动条,一个屏幕一个屏幕的滚动 gitHub: GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Cre ...
- js修炼——手写全屏滚动插件
全屏滚动是目前网站开发常用的效果,笔者也曾使用过类似插件,但是对此类插件的开发一直抱有强烈兴趣,而今在前人的经验指导下,终于领悟到了一些插件开发的思维. 如下效果: 接下来看PageSwitch.js ...
- html5页面可见xing,【 前端资源 网页插件 】全屏滚动效果H5FullscreenPage.js
前提: 介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto. ...
- html5 滚屏效果 插件,jQuery插件fullPage.js实现全屏滚动效果
本文实例为大家分享了全屏滚动插件fullPage.js的具体使用方法,供大家参考,具体内容如下 0.01 基本演示 的HTML 布局 以及js 代码 //需要连接 连接的三个文件 //css文件 / ...
最新文章
- linux c/c++ GDB教程详解
- JAVA命令行编译及运行
- 自定义Dialog(一)
- html 分级切换菜单_FL studio系列教程（十六）：FL Studio查看菜单讲解
- 使用ifconfig取出网卡eth0的ip地址
- 信息学奥赛一本通 1319：【例6.1】排队接水 | 洛谷 P1223 排队接水
- kettle etl 入门第一篇
- html5的离线存储问题集合
- 【java笔记】java基本语言风格（注释，数据，运算符）
- 信息安全学习笔记--CSRF
- 19【推荐系统17】MMoE： 多任务学习
- 学习git: 常用命令
- python产生随机数
- utils工具 常见函数
- R语言初级教程(01): R编程环境的搭建
- spss入门——简单的数据预处理到时间序列分析系列（六）
- 为什么谷歌浏览器打不开 Google Chrome打不开解决方法
- UTC时间转成北京时间
- notepad++打开bin文件
- CSS基础学习六：id选择器