fullPage.js创建全屏单页滚动网站

当前位置：首页 > 网页特效 > 布局 > fullPage.js创建全屏单页滚动网站

fullPage.js创建全屏单页滚动网站

源码大小：8.53MB
所需积分：1积分
源码编号：19JP-3138
浏览次数：683次
最后更新：2023年05月10日
所属栏目：布局

我要下载

加入收藏

本站默认解压密码：19jp.com 或 19jp_com

简介

fullPage.js是一个用于单页网站的jQuery和Vanilla JavaScript插件，允许您创建具有平滑动画和轻松选项的垂直或水平滚动网页。

根据GPL-3.0许可。

特征：

不仅垂直滚动，而且水平滚动
易于使用。可配置和自定义。
也可以在现代和旧的浏览器中工作！
响应式设计，适用于不同的屏幕尺寸以及平板电脑和移动设备
页面加载时自动滚动
支持鼠标滚轮滚动
图像/视频延迟加载。
也可以用作普通的JavaScript插件。
React和Angular包装。

如何使用它:

1.在您的单页网站上包含最新版本的jQuery库（可选）。

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

2.包括一个缓解库，以获得额外的缓解效果。例如jQuery UI、jQuery轻松插件等（可选）

<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

3.在网页上包含fullPage.js插件的文件。

<link rel="stylesheet" href="fullpage.css" />
<script src="fullpage.js"></script>

4.为你的一页网站创建html。

<div id="fullpage">
  <div class="section">One</div>
  <div class="section">Two</div>
  <div class="section">Three</div>
</div>

5.该插件还支持嵌套页面。

<div id="fullpage">
  <div class="section">One</div>
  <div class="section">
    <div class="slide" data-anchor="slide1">Two 1</div>
    <div class="slide" data-anchor="slide2">Two 2</div>
  </div>
  <div class="section">Three</div>
</div>

6.您还可以创建一些导航链接，通过鼠标点击在各个部分之间滚动

<ul id="menu">
  <li data-menuanchor="firstPage"><a href="#firstPage">First slide</a></li>
  <li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
  <li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
</ul>

7.调用插件以启用一页滚动效果。

// vanilla JavaScript
new fullpage('#fullpage', {
    // options here
});

// jQuery
$('#fullpage').fullpage({
  // options here
});

8.所有插件选项，可自定义一页滚动效果。

// A selector used to specify the menu to link with the sections
menu: '#menu',

// Defines the anchor links
anchors:['firstPage', 'secondPage'],

// Whether anchors in the URL will have any effect at all in the library
lockAnchors: false,

// Enables navigation
navigation: false,

// Or 'left'
navigationPosition: 'right',

// An array of tooltips
navigationTooltips: ['firstSlide', 'secondSlide'],

// Enables active tooltip
showActiveTooltip: false,

// Shows a navigation for each landscape slide
slidesNavigation: false,

// Or 'top'
slidesNavPosition: 'bottom',

// Shows browser scrollbar
scrollBar: false,

hybrid: false,

// For commercial use
licenseKey: '',

// Whether to use fullPage.js credits
credits: {
  "enabled": true,
  "label": 'Made with fullPage.js',
  "position": 'right'
},

// Whether to use JavaScript or CSS3 transforms
css3: true,

// Scrolling speed in ms
scrollingSpeed: 700,

// Enables auto scrolling
autoScrolling: true,

// Auto fits sections to the viewport
fitToSection: true,

// Easing effect
easing: 'easeInOutCubic',
easingcss3: 'ease',

// Auto scrolls to the top/bottom
loopBottom: false,
loopTop: false,

// Enables infinite looping on horizontal sliders
loopHorizontal: true,

// Defines whether scrolling down in the last section or should scroll down to the first one and if scrolling up in the first section should scroll up to the last one. 
continuousVertical: false,

// Defines whether sliding right in the last slide should slide right to the first one or not, and if scrolling left in the first slide should slide left to the last one or not.
continuousHorizontal: false,

// Slides horizontally within sliders by using the mouse wheel or trackpad
scrollHorizontally: false,

// Moving one horizontal slider will force the sliding of sliders in other section in the same direction
interlockedSlides: false,

// Enables drag and move
// true: enables the feature.
// false: disables the feature.
// vertical: enables the feature only vertically.
// horizontal: enables the feature only horizontally.
// fingersonly: enables the feature for touch devices only.
// mouseonly: enables the feature for desktop devices only (mouse and trackpad).
dragAndMove: false,

// Use non full screen sections based on percentage
offsetSections: false,

// Resets every slider after leaving its section
resetSliders: false,

// Uses fade effect instead
fadingEffect: false,

// If you want to avoid the auto scroll when scrolling over some elements, this is the option you need to use. (useful for maps, scrolling divs etc.) 
// It requires a string with the Javascript selectors for those elements. (For example: normalScrollElements: '#element1, .element2'). 
normalScrollElements: '#element1, .element2',

// Creates a scroll for the section/slide in case its content is bigger than the height of it
// Requires: /vendor/scrolloverflow.js
scrollOverflow: false,

// Scrolls up the content of the section/slide with scroll bar when leaving to another vertical section
scrollOverflowReset: false,

// Requires iScroll.js library
scrollOverflowOptions: null,

// Defines a percentage of the browsers window width/height, and how far a swipe must measure for navigating to the next section / slide.
touchSensitivity: 5,

//
touchWrapper: null,

// Defines how to scroll to a section which size is bigger than the viewport.
// top, bottom, null
bigSectionsDestination: null,

// Accessibility
keyboardScrolling: true,

// Enables smooth scroll on anchor links
animateAnchor: true,

// Records URL history
recordHistory: true,

// Allows correct direction
allowCorrectDirection: false,

// use a "mac style" for the scrollbar
scrollOverflowMacStyle: true,

// Shows navigation arrows
controlArrows: true,

// Defines the HTML structure and the classes that you want to apply to the control arrows for sections with horizontal slides
controlArrowsHTML: ['<div class="' + SLIDES_STYLED_ARROW + '"></div>', '<div class="' + SLIDES_STYLED_ARROW + '"></div>'],

// Arrow color
controlArrowColor: '#fff',

// Vertically centered?
verticalCentered: true,

// An array of colors for page sections
sectionsColor : ['#ccc', '#fff'],

// padding in pixels
paddingTop: '3em',
paddingBottom: '10px',

// Which elements will be taken off the scrolling structure of the plugin which is necessary when using the css3 option to keep them fixed
fixedElements: '#header, .footer',

// A normal scroll (autoScrolling:false) will be used under the defined width in pixels
responsiveWidth: 0,

// A normal scroll (autoScrolling:false) will be used under the defined height in pixels
responsiveHeight: 0,

// When set to true slides will be turned into vertical sections when responsive mode is fired
responsiveSlides: false,

// Enables parallax backgrounds effects
parallax: false,

// Parallax options
parallaxOptions: {
  type: 'reveal',
  percentage: 62,
  property: 'translate'
},

// Enables card effects
cards: false,

// Card options
cardsOptions: {
  perspective: 100,
  fadeContent: true,
  fadeBackground: true
},

// Custom selectors
sectionSelector: '.section',
slideSelector: '.slide',

// Lazy load media elements
lazyLoading: true,

// Whether or not to observe changes in the HTML structure of the page
observer: true,

9.回调函数。

new fullpage('#fullpage', {
    afterLoad: function(origin, destination, direction){
      // ...
    },

    onLeave: function(origin, destination, direction){
      // ...
    },

    afterRender: function(){
      // ...
    },

    afterResize: function(width, height){
      // ...
    },

    afterReBuild: function(){
      // ...
    },

    afterSlideLoad: function(section, origin, destination, direction){
      // ...
    },

    onSlideLeave: function(section, origin, destination, direction){
      // ...
    },

    afterResponsive: function(isResponsive){
      // ...
    }
});

10.API方法。

// Gets the active section and its properties
fullpage_api.getActiveSection();

// Gets the active slide and its properties
fullpage_api.getActiveSlide();

// Gets the Y & X position
fullpage_api.getScrollY();
fullpage_api.getScrollX();

// Scrolls up
fullpage_api.moveSectionUp();

// Scrolls down
fullpage_api.moveSectionDown();

// Moves to a specific section & slide
fullpage_api.moveTo('firstSlide', 2);
fullpage_api.moveTo(3, 0);
fullpage_api.moveTo(3);

// Without animation
// silentMoveTo(section, slide)
fullpage_api.silentMoveTo('firstSlide', 2);

// Scrolls right
fullpage_api.moveSlideRight();

// Scrolls left
fullpage_api.moveSlideLeft();

// Sets auto scrolling
fullpage_api.setAutoScrolling(false);

// Sets the value for the option fitToSection determining whether to fit the section in the screen or not
fullpage_api.setFitToSection(false);

// Fit the active section to the viewport
fullpage_api.fitToSection();

// Sets the value for the option lockAnchors determining whether anchors will have any effect in the URL or not
fullpage_api.setLockAnchors(false);

// Adds or remove the possibility of scrolling through sections/slides by using the mouse wheel/trackpad or touch gestures (which is active by default) 
fullpage_api.setAllowScrolling(false);
fullpage_api.setAllowScrolling(false, 'down');
fullpage_api.setAllowScrolling(false, 'down, right');

// Adds or remove the possibility of scrolling through sections by using the keyboard (which is active by default)
fullpage_api.setKeyboardScrolling(false);
fullpage_api.setKeyboardScrolling(false, 'down');
fullpage_api.setKeyboardScrolling(false, 'down, right');

// Enables/disables URL history
fullpage_api.setRecordHistory(false);

// Sets the scrolling speed in milliseconds.
fullpage_api.setScrollingSpeed(700);

// Destroys the plugin
fullpage_api.destroy();
fullpage_api.destroy('all');

// Re-builds the plugin
fullpage_api.reBuild();

// Sets the responsive mode of the page
fullpage_api.setResponsive(true);

// Turns horizontal slides into vertical sections
fullpage_api.responsiveSlides.toSections();

// Turns back the original slides (now converted into vertical sections) into horizontal slides again
fullpage_api.responsiveSlides.toSlides();

更新日志：

版本4.0.19（2023-03-14）

修复了错误

版本4.0.18（2023-03-02）

修复了错误

版本4.0.17（2023-02-17）

修复了错误

版本4.0.16（2023-02-03）

修复了错误

版本4.0.15（2022-11-23）

修复了错误

版本4.0.14（2022-11-12）

增强：允许额外的域进行激活
错误修复程序

4.0.12版（2022-10-25）

增强功能：删除注释掉的样式
增强功能：将事件字符串重构为属性
错误修复程序

4.0.11版（2022-09-08）

增强功能：动态内容更改可以通过scrollOverflow自动滚动
增强功能：选项卡操作不强制滚动
增强：将fitToSection从CSS快照恢复为自定义JS
错误修复程序

版本4.0.10（2022-08-08）

错误修复程序

版本4.0.9（2022-05-31）

修正了错误：在移动结束前滑动时，全屏停止滚动
修正了错误：滚动条不会导致滚动转换向后滚动

版本4.0.8（2022-05-21）

修复了一个错误：fullpage.js在Safari<13上不起作用
修正了错误：scrollOverflow+浮动距离使其无法移动到下一节
修复Android上输入焦点的错误
增强：改进了滚动条：requestAnimationFrame的真实性能
修复了错误：修复了重定向alvarotrigo/react fullpage时react fullpage&gatsby的问题
修复了错误：在触摸屏电脑上滑动不起作用

版本4.0.7（2022-05-10）

修复了错误

版本4.0.6（2022-04-19）

修复了错误：getActiveSlide无法工作
修复了错误：licenseKey验证问题

版本4.0.5（2022-04-13）

修正了滚动溢出轮在触摸屏设备上无法工作的错误
修复错误：安全问题

版本4.0.0/1/2/3/4（2022-04-12）

增强功能：可自定义导航箭头
增强：fullPage.js忽略响应上的隐藏部分
增强功能：全屏后正常滚动
增强：新的选项观察员。fullpage.js对DOM更改做出反应
增强功能：新选项滚动OverflowMacStyle
增强：新选项控件自定义箭头的箭头HTML
增强功能：添加beforeLeave回调，允许防止滚动
增强功能：水平导航项目符号将在幻灯片上获得即时响应
增强：在所有回调中添加了触发器参数
增强：添加了onScrollOverflow回调来跟踪Y位置
增强：添加了getScrollY和getScrollX方法来跟踪位置
增强功能：现在可以通过编程方式滚动可滚动的部分
增强：verticalCentered现在将使用flexbox，并且不会包装内容
增强：部分将不再使用固定的px高度，取而代之的是100vh
增强：fitToSection现在将使用本地CSS快照行为
增强：scrollOverflowReset现在将允许幻灯片和节值。
增强：改变了扩展激活的工作方式
增强：改变了fullPage.js许可证的工作方式
增强：新的期权信用
修复了错误：滚动条：true导致闪烁
修复了错误：scrollOverflow读取节底部时意外滚动
修复了错误：scrollOverflow部分无法通过箭头键滚动
修复错误：scrollOverflow阻止Vimeo视频转为全屏
修复错误：scrollOverflow阻止YouTube视频全屏播放
修复了scrollOverflow阻止在IE中使用音频控件的错误
修复了错误：scrollOverflow阻止了手机上的输入点击
修正了错误：导航锚和滚动条不允许快速点击菜单
修复了IOS 13及以下版本的错误高度
修复了chrome android上奇怪的底部矩形错误
修复了错误：jQuery适配器因缩小文件而失败
修复了错误：一些选项在缩小的文件中不起作用
已删除：v2compatible选项
已删除：scrolloverflow.min.js依赖项
已删除：fitToSectionDelay选项
已删除：scrollOverflowOptions选项
删除：IE 9兼容性

v3.1.2 (2021-06-25)

新的水效扩展和新的选项waterEffect和waterEffectOptions

v3.1.1 (2021-05-05)

修复了错误：调整大小后（或在移动设备上）没有触发回调

v3.1.0 (2021-02-18)

新的Drop Effect扩展和新选项dropEffect和dropEffectOptions
修复了错误：URL中的数据锚无法在滚动时更新
修复了错误：响应模式下回调未启动
修复了错误：使用选项`sectionSelector时锚点不更新
修正了错误：dragAndMove导致在第一节返回第一张幻灯片时转换缓慢

3.0.9版（2020-07-07）

修复了错误：normalScrollElements+scrollOverflow当没有创建滚动条时
修复错误：在焦点事件后将isWindowFocused设置回true以允许再次滚动
修复了错误：scrollOverflow在Microsoft Edge#3840中不起作用
修正了错误：懒惰加载忽略fp自动高度报告#3944
修复了错误：normalScrollElements和鼠标离开调试控制台的错误。
修正了错误：拖动并缓慢移动回节内的第一张幻灯片
修复了错误：修复了水平幻灯片项目符号中的屏幕阅读器信息
修正了错误：只应用几个锚点会将它们放置在错误的部分
修正了错误：当使用responsiveHeight#3897时，将横向切换为纵向时，活动部分错误
修正了错误：使用非常快的滚动速度时增加了最小过渡圈数
修复了错误：响应式幻灯片扩展在切换模式时丢失了附加到元素的侦听器
增强：使用2D变换进行垂直中心导航

3.0.8版（2019-11-26）

修复了点击元素后出现的normalScrollElement错误
修复错误：normalScroll+修复元素在firefox上无法正常工作
修复了错误：溢出：滚动无法在scrollOverflow内滚动

3.0.7版（2019-07-11）

修复了scrollOverflow在移动设备中不起作用的错误
修复了错误：供应商缩小的文件不是最新的
修复了错误：dist文件不是最新的

3.0.6版（2019年7月10日）

修复错误：facebook和instagram浏览器计算页面高度错误
修正了IOS12渐进式Web应用程序响应式调整大小的错误
修复了一个错误：OrientationChange破坏了Chrome手机上的布局
修正了错误：延迟加载fp自动高度不会加载视口中的所有图像
修复了afterLoad回调中的原始参数为null的错误
修正了使用lazylod:true和scrolloverflow时内容隐藏在底部的错误
修复错误：dragAndMove与normalScrollElements不兼容
修复了错误：scrollOverflow最后一次滚动阻止滚动到节的底部
修正了使用continuousVertical时激活错误导航点的错误
修复了错误：normalScrollElements和fancybox未按预期工作
修复错误：scrollOerflow+verticalCentered+paddingTop
修正了使用autoScrolling时鼠标中滚动被破坏的错误：false
修复了使用bundler时未定义scrolloverflow IScroll的错误
修复了错误：$（…）。fullpage在销毁后不是函数
修正错误：Safari iOS-垂直对齐错误
修复了以下错误：normalScrollElements&scrollBar:true&setAllowScrolling方法不能一起工作
增强功能：空格键不会导致HTML视频和音频滚动
删除了normalScrollElementTouchThreshold选项

3.0.5版（2019-04-11）

添加了新选项卡和卡卡扩展插件的选项
修复了错误：scrollOverflow供应商文件不是最新的，并创建了错误
修复了错误：setAllowScrolling（false）仍然阻止移动设备上的鼠标操作
修正了当滑动到第一张幻灯片时拖动和移动速度减慢的错误
修正了滚动溢出到达底部时倾斜的错误
修复了错误：$.fn.fullpage方法在afterLoad中不可用
修复了错误：recordHistory无法使用滚动条：true
修复了Google Chrome 73上的闪烁错误
修正了一个错误：如果手机上的模式关闭，scrollOverflow无法滚动
修复了错误：允许使用多个菜单元素
增强：getFullpageData作为函数
增强功能：添加了touchWrapper选项
文档：删除使用fulllPage的用户的链接
文档：说明扩展仅适用于fullpage v3
文档：更新backers.md

版本3.0.4（2018-11-30）

更新版本和dist文件

v3.0.2（2018年7月26日）

更新版本和dist文件

v3.0.1（2018年6月27日）

更新版本和dist文件

v2.9.7版本（2018-04-09）

更新版本和dist文件

v2.9.6版本（2018年1月30日）

更新版本和dist文件

v2.9.5版本（2017-10-25）

更新版本和dist文件

v2.9.4版本（2017-03-11）

添加：图片srcset元素的延迟加载

v2.9.3版本（2017-03-01）

添加视差扩展

v2.7.9版本（2016-04-15）

使现代化

v2.6.6版本（2015-06-08）

旧版本firefox的ixed鼠标滚轮
修复了slimScroll的错误
修复了使用滚动条时的错误：true并打开新选项卡（ctrl+t）
添加了新选项锁定锚到锁定锚#1198
添加了新选项responsiveHeight
添加新选项responsiveWidth替换旧选项responsive
添加了新功能setLockAnchors
修改了setKeyboardScrolling功能以锁定键盘在特定方向上的滚动
添加了新功能，可在滚动发生之前取消滚动
Callback on SlideLeave现在有一个新参数nextIndex
单幻灯片内部部分不会显示导航项目符号
为延迟加载图像、视频和音频元素添加了新功能。
添加了一个新功能，可以在视频/音频进入视口时播放和停止它们

v2.6.5版本（2015-05-01）

修复了使用scrollOverflow的错误：true和autoScrolling:false#553
修复了使用缩放（ctrl+鼠标）的错误
afterLoad回调现在也将在页面渲染上启动
修复了setAllowScrolling左右滚动的错误
修复了使用continuousVertical时触发多个回调的错误
添加了新方法$.fn.fullpage.silentMove以滚动而不显示动画
窗口大小调整现在没有动画
在文档中添加了npm安装
改进了有关创建指向节、幻灯片和锚点的链接的文档
在代码中添加了更多注释

v2.6.3版本（2015-04-10）

已解决滑动锚点的错误

2014-09-20

在不再需要的触摸设备上双击项目符号

2014-07-01

解决了常见选择器的问题

预览截图

fullPage.js创建全屏单页滚动网站

相关热词： 滚动单页全屏创建 fullPage.js 网站

上一篇：响应式jQuery等高照片库插件 Pycs布局
下一篇：增强可拖动拆分器jQuery插件 enhsplit.js

开发前端软件素材源码教程下载网站