Create Fullscreen One Page Scrolling Websites With fullPage.js

File Size: 8.58 MB
Views Total: 114449
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Create Fullscreen One Page Scrolling Websites With fullPage.js

fullPage.js is a jQuery and Vanilla JavaScript plugin for one page website that allows you to create vertical or horizontal scrolling web page with smooth animations and easing options.

Licensed under the GPL-3.0.

Features:

  • Not only vertical scrolling but also horizontal scrolling. 
  • Easy to use. Configurable and customizable.
  • Working in modern and old browsers too!
  • Responsive designed to fit to different screen sizes as well as tablet and mobile devices. 
  • Auto scrolling on page load
  • Supports mousewheel scrolling
  • Image/video lazy load.
  • Also can be used as a vanilla JavaScript plugin.
  • React & Angular wrappers.

You might also like:

How to use it:

1. Include the latest version of jQuery library on your one page website (OPTIONAL).

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

2. Include an easing library for extra easing effects. E.g. jQuery UI, jQuery easing plugin, etc (OPTIONAL)

<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. Include the fullPage.js plugin's files on the web page.

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

4. Create the html for your one page website.

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

5. The plugin also supports nested pages.

<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. You can also create some navigation links to scroll between sections by mouse click

<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. Call the plugin to enable the one page scrolling effect.

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

// jQuery
$('#fullpage').fullpage({
  // options here
});

8. All plugin options to customize the one page scrolling effect.

// 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. Callback functions.

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 methods.

// 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();

Changelog:

v4.0.22 (2024-01-31)

  • Fixed bugs

v4.0.21 (2024-01-31)

  • Fixed bugs

v4.0.20 (2023-05-30)

  • Fixed bugs

v4.0.19 (2023-03-14)

  • Fixed bugs

v4.0.18 (2023-03-02)

  • Fixed bugs

v4.0.17 (2023-02-17)

  • Fixed bugs

v4.0.16 (2023-02-03)

  • Fixed bugs

v4.0.15 (2022-11-23)

  • Fixed bugs

v4.0.14 (2022-11-12)

  • Enhancement: allowing extra domains for activations
  • Bugfixes

v4.0.12 (2022-10-25)

  • Enhancement: removing commented-out styles
  • Enhancement: refactoring event strings to properties
  • Bugfixes

v4.0.11 (2022-09-08)

  • Enhancement: dynamically content changes can automatically become scrollable with scrollOverflow
  • Enhancement: tabbing didn't force scroll
  • Enhancement: reverting fitToSection from CSS Snaps to custom JS
  • Bugfixes

v4.0.10 (2022-08-08)

  • Bugfixes

v4.0.9 (2022-05-31)

  • Fixed bug: Fullpage stops scrolling while swiping before the movement ends
  • Fixed bug: scrollBar causes no scroll transition scrolling back

v4.0.8 (2022-05-21)

  • Fixed bug: fullpage.js didn't work on Safari < 13
  • Fixed bug: scrollOverflow + floating distances prevented it from moving to next section
  • Fixing bug on input focus on Android
  • Enhancement: improved scrollBar: true performance with requestAnimationFrame
  • Fixed bug: fixing problem with react-fullpage & gatsby on redirect alvarotrigo/react-fullpage
  • Fixed bug: swipe didn't work on touchscreen computers

v4.0.7 (2022-05-10)

  • Fixed bugs

v4.0.6 (2022-04-19)

  • Fixed bug: getActiveSlide didn't work
  • Fixed bug: problems with licenseKey verification

v4.0.5 (2022-04-13)

  • Fixed bug: scrollOverflow wheel didn't work on touch screen devices
  • Fixed bug: security issue

v4.0.0/1/2/3/4 (2022-04-12)

  • Enhancement: customizable navigating arrows
  • Enhancement: fullPage.js ignores hidden sections on responsive
  • Enhancement: normal scroll after fullpage
  • Enhancement: new option observer . fullpage.js reacts to DOM changes
  • Enhancement: new option scrollOverflowMacStyle
  • Enhancement: new option controlArrowsHTML for custom arrows
  • Enhancement: added beforeLeave callback that allows preventing scroll
  • Enhancement: horizontal navigation bullets will get instant response on slide
  • Enhancement: added trigger param in all callbacks
  • Enhancement: added onScrollOverflow callback to track Y position
  • Enhancement: added getScrollY and getScrollX methods to track positions
  • Enhancement: scrollable sections can now be scrolled programmatically
  • Enhancement: verticalCentered will now use flexbox and won't wrap the content
  • Enhancement: sections will no longer use fixed height in px in favour of 100vh
  • Enhancement: fitToSection will now use native CSS snaps behaviour
  • Enhancement: scrollOverflowReset will now admit slides and section values.
  • Enhancement: changed the way extensions activation works
  • Enhancement: changed the way fullPage.js license works
  • Enhancement: new option credits
  • Fixed bug: scrollbar:true caused flickering
  • Fixed bug: scrollOverflow accidental scrolling when reading sections' bottom
  • Fixed bug: scrollOverflow sections were not scrollable by arrow keys
  • Fixed bug: scrollOverflow prevented Vimeo video turn fullscreen
  • Fixed bug: scrollOverflow prevented YouTube video turn fullscreen
  • Fixed bug: scrollOverflow prevented the use of audio controls in IE
  • Fixed bug: scrollOverflow prevented inputs clicks on mobile
  • Fixed bug: navigation anchors & scrollBar didn't allow fast clicks on menu
  • Fixed bug: wrong height of section on IOS 13 and below
  • Fixed bug: strange bottom rectangle on chrome android
  • Fixed bug: jQuery adapter failed with minified file
  • Fixed bug: some options didnt work in minified files
  • Removed: v2compatible option
  • Removed: scrolloverflow.min.js dependency
  • Removed: fitToSectionDelay option
  • Removed: scrollOverflowOptions option
  • Removed: IE 9 compatibility

v3.1.2 (2021-06-25)

  • New Water Effect extension and new options waterEffect and waterEffectOptions

v3.1.1 (2021-05-05)

  • Fixed bug: callbacks were not getting fired after resize (or on mobile)

v3.1.0 (2021-02-18)

  • New Drop Effect extension and new options dropEffect and dropEffectOptions
  • Fixed bug: Data anchors in URL not updating on scroll
  • Fixed bug: On responsive mode callbacks are not firing
  • Fixed bug: anchors not updating when using option `sectionSelector
  • Fixed bug: dragAndMove caused slow transition on goinb back to 1st slide on 1st section

v3.0.9 (2020-07-07)

  • Fixed bug: normalScrollElements + scrollOverflow when no scrollbar created
  • Fixed bug: setting isWindowFocused back to true after focus events to allow scrolling again
  • Fixed bug: scrollOverflow not work in Microsoft Edge #3840
  • Fixed bug: Lazy load ignores fp-auto-height-reponsive #3944
  • Fixed bug: error with normalScrollElements and mouse leave to debug console.
  • Fixed bug: dragAndMove slow move back to 1st slide within section
  • Fixed bug: fixing screen readers info in horizontal slides bullets 
  • Fixed bug: applying only a few anchors was placing them in the wrong sections
  • Fixed bug: wrong active section when switching landscape to portrait when using responsiveHeight #3897
  • Fixed bug: added minimum transition laps when using a very fast scrolling speed
  • Fixed bug: Responsive Slides extension was losing listeners attached to elements when switching modes
  • Enhancement: vertical center navigation using 2D transform

v3.0.8 (2019-11-26)

  • Fixed bug: normalScrollElement bug after clicking on the element
  • Fixed bug: normalScroll + fixed element didn't work well on firefox
  • Fixed bug: overflow:scroll isn't scrollable inside scrollOverflow

v3.0.7 (2019-07-11)

  • Fixed bug: scrollOverflow not working in mobile
  • Fixed bug: vendor minified files were not up to date
  • Fixed bug: dist files were not up to date

v3.0.6 (2019-07-10)

  • Fixed bug: facebook & instagram browser miscalculates page height
  • Fixed bug: IOS 12 Progressive Web App Responsive resizing
  • Fixed bug: OrientationChange breaks layout on Chrome mobile
  • Fixed bug: Lazy loading fp-auto-height does not load all images in viewport
  • Fixed bug: origin param in afterLoad call back is null
  • Fixed bug: content gets hidden at the bottom when using lazyload:true and scrolloverflow:true
  • Fixed bug: dragAndMove was not compatible with normalScrollElements
  • Fixed bug: scrollOverflow last scroll prevents to scroll to the bottom of a section
  • Fixed bug: wrong navigation dot activated when using continuousVertical
  • Fixed bug: normalScrollElements & fancybox not working as expected
  • Fixed bug: scrollOerflow + verticalCentered + paddingTop
  • Fixed bug: middle Mouse Scrolling is Broken when using autoScrolling:false
  • Fixed bug: scrolloverflow IScroll is not defined when using bundler
  • Fixed bug: $(...).fullpage is not a function after destroy
  • Fixed bug: Safari iOS - Vertical Align Bug
  • Fixed bug: normalScrollElements & scrollBar:true & setAllowScrolling method not working together
  • Enhancement: spacebar won't cause scroll on HTML videos and audios
  • Removed normalScrollElementTouchThreshold option

v3.0.5 (2019-04-11)

  1. Added new options cards and cardsOptions for the Cards extension
  2. Fixed bug: scrollOverflow vendors file was not up to date and created errors
  3. Fixed bug: setAllowScrolling(false) was still preventing mouse actions on mobile
  4. Fixed bug: dragAndMove slowed down when sliding to 1st slide
  5. Fixed bug: scrollOverflow tilting when reaching bottom
  6. Fixed bug: $.fn.fullpage methods not available in afterLoad
  7. Fixed bug: recordHistory not working with scrollBar:true
  8. Fixed bug: flickering error on Google Chrome 73
  9. Fixed bug: scrollOverflow can't scroll if modal closed on mobile
  10. Fixed bug: enabling the use of multiple menu elements
  11. Enhancement: getFullpageData as function
  12. Enhancement: added touchWrapper option
  13. Documentation: removing link from who is using fulllPage
  14. Documentation: clarify that extensions are only available for fullpage v3
  15. Documentation: updating backers.md

v3.0.4 (2018-11-30)

  • Updating version and dist files

v3.0.2 (2018-07-26)

  • Updating version and dist files

v3.0.1 (2018-06-27)

  • Updating version and dist files

v2.9.7 (2018-04-09)

  • Updating version and dist files

v2.9.6 (2018-01-30)

  • Updating version and dist files

v2.9.5 (2017-10-25)

  • Updating version and dist files

v2.9.4 (2017-03-11)

  • Added: lazy load for picture srcset elements

v2.9.3 (2017-03-01)

  • Adding parallax extension

v2.7.9 (2016-04-15)

  • update

v2.6.6 (2015-06-08)

  • ixed mousewheel for old firefox versions
  • Fixed bug with slimScroll 
  • Fixed bug when using scrollBar:true and opening a new tab (ctrl + t)
  • Added new option lockAnchors to lock anchors #1198
  • Added new option responsiveHeight 
  • Added new option responsiveWidth replacing the old option responsive
  • Added new function setLockAnchors 
  • Modified setKeyboardScrolling function to lock keyboard scrolling in specific directions
  • Added new functionality to cancel the scroll before it takes place
  • Callback onSlideLeave has now a new parameter nextIndex
  • Single slide inside section won't show navigation bullets 
  • Added a new functionality to lazy load images, videos and audio elements.
  • Added a new functionality to play and stop videos/audios when they enter in the viewport

v2.6.5 (2015-05-01)

  • Fixed bug using scrollOverflow:true and autoScrolling:false #553
  • Fixed bug using zoom (ctrl + mouse)
  • afterLoad callback will now fire on page render as well
  • Fixed bug with setAllowScrolling right and left
  • Fixed bug which fired multiple callbacks when using continuousVertical
  • Added new method $.fn.fullpage.silentMove to scroll with no animation 
  • Window resize has no animation now
  • Added npm installation to the documentation
  • Improved documentation about Creating links to sections or slides and anchors
  • Added some more comments in the code

v2.6.3 (2015-04-10)

  • Solved bug with slide anchors

2014-09-20

  • Double click over bullets on touch devices no longer needed

2014-07-01

  • Solved problem with common selectors. 

 


This awesome jQuery plugin is developed by alvarotrigo. For more Advanced Usages, please check the demo page or visit the official website.