fullPage.js是一个用于单页网站的jQuery和Vanilla JavaScript插件,允许您创建具有平滑动画和轻松选项的垂直或水平滚动网页。
根据GPL-3.0许可。
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)
版本4.0.10(2022-08-08)
版本4.0.9(2022-05-31)
版本4.0.8(2022-05-21)
版本4.0.7(2022-05-10)
版本4.0.6(2022-04-19)
版本4.0.5(2022-04-13)
版本4.0.0/1/2/3/4(2022-04-12)
v3.1.2 (2021-06-25)
v3.1.1 (2021-05-05)
v3.1.0 (2021-02-18)
3.0.9版(2020-07-07)
3.0.8版(2019-11-26)
3.0.7版(2019-07-11)
3.0.6版(2019年7月10日)
3.0.5版(2019-04-11)
版本3.0.4(2018-11-30)
v3.0.2(2018年7月26日)
v3.0.1(2018年6月27日)
v2.9.7版本(2018-04-09)
v2.9.6版本(2018年1月30日)
v2.9.5版本(2017-10-25)
v2.9.4版本(2017-03-11)
v2.9.3版本(2017-03-01)
v2.7.9版本(2016-04-15)
v2.6.6版本(2015-06-08)
v2.6.5版本(2015-05-01)
v2.6.3版本(2015-04-10)
2014-09-20
2014-07-01
Â