Create Fullscreen One Web page Scrolling Web sites With fullPage.js

fullPage.js is a jQuery and Vanilla JavaScript plugin for one web page web site that permits you to create vertical or horizontal scrolling net web page with easy animations and easing choices.

Licensed beneath the GPL-3.0.

Options:

• Not solely vertical scrolling but additionally horizontal scrolling. 
• Simple to make use of. Configurable and customizable.
• Working in fashionable and outdated browsers too!
• Responsive designed to suit to completely different display screen sizes in addition to pill and cellular units. 
• Auto scrolling on web page load
• Helps mousewheel scrolling
• Picture/video lazy load.
• Additionally can be utilized as a vanilla JavaScript plugin.
• React & Angular wrappers.

You may additionally like:

The way to use it:

1. Embrace the newest model of jQuery library in your one web page web site (OPTIONAL).

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

2. Embrace an easing library for additional easing results. E.g. jQuery UI, jQuery easing plugin, and so forth (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. Embrace the fullPage.js plugin’s information on the internet web page.

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

4. Create the html on your one web page web site.

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

5. The plugin additionally helps nested pages.

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

6. You may also create some navigation hyperlinks to scroll between sections by mouse click on

<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. Name the plugin to allow the one web page scrolling impact.

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

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

8. All plugin choices to customise the one web page scrolling impact.

// A selector used to specify the menu to hyperlink with the sections
menu: '#menu',

// Defines the anchor hyperlinks
anchors:['firstPage', 'secondPage'],

// Whether or not anchors within the URL can have any impact in any respect within the library
lockAnchors: false,

// Allows navigation
navigation: false,

// Or 'left'
navigationPosition: 'proper',

// An array of tooltips
navigationTooltips: ['firstSlide', 'secondSlide'],

// Allows lively tooltip
showActiveTooltip: false,

// Exhibits a navigation for every panorama slide
slidesNavigation: false,

// Or 'high'
slidesNavPosition: 'backside',

// Exhibits browser scrollbar
scrollBar: false,

hybrid: false,

// For industrial use
licenseKey: '',

// Whether or not to make use of fullPage.js credit
credit: {
  "enabled": true,
  "label": 'Made with fullPage.js',
  "place": 'proper'
},

// Whether or not to make use of JavaScript or CSS3 transforms
css3: true,

// Scrolling velocity in ms
scrollingSpeed: 700,

// Allows auto scrolling
autoScrolling: true,

// Auto suits sections to the viewport
fitToSection: true,

// Easing impact
easing: 'easeInOutCubic',
easingcss3: 'ease',

// Auto scrolls to the highest/backside
loopBottom: false,
loopTop: false,

// Allows infinite looping on horizontal sliders
loopHorizontal: true,

// Defines whether or not scrolling down within the final part or ought to scroll all the way down to the primary one and if scrolling up within the first part ought to scroll as much as the final one. 
continuousVertical: false,

// Defines whether or not sliding proper within the final slide ought to slide proper to the primary one or not, and if scrolling left within the first slide ought to slide left to the final one or not.
continuousHorizontal: false,

// Slides horizontally inside sliders by utilizing the mouse wheel or trackpad
scrollHorizontally: false,

// Transferring one horizontal slider will drive the sliding of sliders in different part in the identical course
interlockedSlides: false,

// Allows drag and transfer
// true: allows the characteristic.
// false: disables the characteristic.
// vertical: allows the characteristic solely vertically.
// horizontal: allows the characteristic solely horizontally.
// fingersonly: allows the characteristic for contact units solely.
// mouseonly: allows the characteristic for desktop units solely (mouse and trackpad).
dragAndMove: false,

// Use non full display screen sections primarily based on proportion
offsetSections: false,

// Resets each slider after leaving its part
resetSliders: false,

// Makes use of fade impact as a substitute
fadingEffect: false,

// If you wish to keep away from the auto scroll when scrolling over some components, that is the choice you have to use. (helpful for maps, scrolling divs and so forth.) 
// It requires a string with the Javascript selectors for these components. (For instance: normalScrollElements: '#element1, .element2'). 
normalScrollElements: '#element1, .element2',

// Creates a scroll for the part/slide in case its content material is greater than the peak of it
// Requires: /vendor/scrolloverflow.js
scrollOverflow: false,

// Scrolls up the content material of the part/slide with scroll bar when leaving to a different vertical part
scrollOverflowReset: false,

// Requires iScroll.js library
scrollOverflowOptions: null,

// Defines a proportion of the browsers window width/peak, and the way far a swipe should measure for navigating to the following part / slide.
touchSensitivity: 5,

//
touchWrapper: null,

// Defines find out how to scroll to a piece which dimension is greater than the viewport.
// high, backside, null
bigSectionsDestination: null,

// Accessibility
keyboardScrolling: true,

// Allows easy scroll on anchor hyperlinks
animateAnchor: true,

// Information URL historical past
recordHistory: true,

// Permits appropriate course
allowCorrectDirection: false,

// use a "mac fashion" for the scrollbar
scrollOverflowMacStyle: true,

// Exhibits navigation arrows
controlArrows: true,

// Defines the HTML construction and the courses that you just need to apply to the management arrows for sections with horizontal slides
controlArrowsHTML: ['<div class="' + SLIDES_STYLED_ARROW + '"></div>', '<div class="' + SLIDES_STYLED_ARROW + '"></div>'],

// Arrow coloration
controlArrowColor: '#fff',

// Vertically centered?
verticalCentered: true,

// An array of colours for web page sections
sectionsColor : ['#ccc', '#fff'],

// padding in pixels
paddingTop: '3em',
paddingBottom: '10px',

// Which components might be taken off the scrolling construction of the plugin which is important when utilizing the css3 choice to preserve them fastened
fixedElements: '#header, .footer',

// A traditional scroll (autoScrolling:false) might be used beneath the outlined width in pixels
responsiveWidth: 0,

// A traditional scroll (autoScrolling:false) might be used beneath the outlined peak in pixels
responsiveHeight: 0,

// When set to true slides might be was vertical sections when responsive mode is fired
responsiveSlides: false,

// Allows parallax backgrounds results
parallax: false,

// Parallax choices
parallaxOptions: {
  sort: 'reveal',
  proportion: 62,
  property: 'translate'
},

// Allows card results
playing cards: false,

// Card choices
cardsOptions: {
  perspective: 100,
  fadeContent: true,
  fadeBackground: true
},

// Customized selectors
sectionSelector: '.part',
slideSelector: '.slide',

// Lazy load media components
lazyLoading: true,

// Whether or not or to not observe modifications within the HTML construction of the web page
observer: true,

9. Callback capabilities.

new fullpage('#fullpage', {
    afterLoad: operate(origin, vacation spot, course){
      // ...
    },

    onLeave: operate(origin, vacation spot, course){
      // ...
    },

    afterRender: operate(){
      // ...
    },

    afterResize: operate(width, peak){
      // ...
    },

    afterReBuild: operate(){
      // ...
    },

    afterSlideLoad: operate(part, origin, vacation spot, course){
      // ...
    },

    onSlideLeave: operate(part, origin, vacation spot, course){
      // ...
    },

    afterResponsive: operate(isResponsive){
      // ...
    }
});

10. API strategies.

// Will get the lively part and its properties
fullpage_api.getActiveSection();

// Will get the lively slide and its properties
fullpage_api.getActiveSlide();

// Will get the Y & X place
fullpage_api.getScrollY();
fullpage_api.getScrollX();

// Scrolls up
fullpage_api.moveSectionUp();

// Scrolls down
fullpage_api.moveSectionDown();

// Strikes to a particular part & slide
fullpage_api.moveTo('firstSlide', 2);
fullpage_api.moveTo(3, 0);
fullpage_api.moveTo(3);

// With out animation
// silentMoveTo(part, slide)
fullpage_api.silentMoveTo('firstSlide', 2);

// Scrolls proper
fullpage_api.moveSlideRight();

// Scrolls left
fullpage_api.moveSlideLeft();

// Units auto scrolling
fullpage_api.setAutoScrolling(false);

// Units the worth for the choice fitToSection figuring out whether or not to suit the part within the display screen or not
fullpage_api.setFitToSection(false);

// Match the lively part to the viewport
fullpage_api.fitToSection();

// Units the worth for the choice lockAnchors figuring out whether or not anchors can have any impact within the URL or not
fullpage_api.setLockAnchors(false);

// Provides or take away the opportunity of scrolling by means of sections/slides by utilizing the mouse wheel/trackpad or contact gestures (which is lively by default) 
fullpage_api.setAllowScrolling(false);
fullpage_api.setAllowScrolling(false, 'down');
fullpage_api.setAllowScrolling(false, 'down, proper');

// Provides or take away the opportunity of scrolling by means of sections by utilizing the keyboard (which is lively by default)
fullpage_api.setKeyboardScrolling(false);
fullpage_api.setKeyboardScrolling(false, 'down');
fullpage_api.setKeyboardScrolling(false, 'down, proper');

// Allows/disables URL historical past
fullpage_api.setRecordHistory(false);

// Units the scrolling velocity in milliseconds.
fullpage_api.setScrollingSpeed(700);

// Destroys the plugin
fullpage_api.destroy();
fullpage_api.destroy('all');

// Re-builds the plugin
fullpage_api.reBuild();

// Units the responsive mode of the web page
fullpage_api.setResponsive(true);

// Turns horizontal slides into vertical sections
fullpage_api.responsiveSlides.toSections();

// Turns again the unique slides (now transformed into vertical sections) into horizontal slides once more
fullpage_api.responsiveSlides.toSlides();

Changelog:

v4.0.11 (2022-09-08)

• Enhancement: dynamically content material modifications can robotically turn out to be scrollable with scrollOverflow
• Enhancement: tabbing did not drive scroll
• Enhancement: reverting fitToSection from CSS Snaps to customized JS
• Bugfixes

v4.0.10 (2022-08-08)

v4.0.9 (2022-05-31)

• Mounted bug: Fullpage stops scrolling whereas swiping earlier than the motion ends
• Mounted bug: scrollBar causes no scroll transition scrolling again

v4.0.8 (2022-05-21)

• Mounted bug: fullpage.js did not work on Safari < 13
• Mounted bug: scrollOverflow + floating distances prevented it from transferring to subsequent part
• Fixing bug on enter deal with Android
• Enhancement: improved scrollBar: true efficiency with requestAnimationBody
• Mounted bug: fixing drawback with react-fullpage & gatsby on redirect alvarotrigo/react-fullpage
• Mounted bug: swipe did not work on touchscreen computer systems

v4.0.7 (2022-05-10)

v4.0.6 (2022-04-19)

• Mounted bug: getActiveSlide did not work
• Mounted bug: issues with licenseKey verification

v4.0.5 (2022-04-13)

• Mounted bug: scrollOverflow wheel did not work on contact display screen units
• Mounted bug: safety situation

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

• Enhancement: customizable navigating arrows
• Enhancement: fullPage.js ignores hidden sections on responsive
• Enhancement: regular scroll after fullpage
• Enhancement: new possibility observer . fullpage.js reacts to DOM modifications
• Enhancement: new possibility scrollOverflowMacStyle
• Enhancement: new possibility controlArrowsHTML for customized arrows
• Enhancement: added beforeLeave callback that enables stopping scroll
• Enhancement: horizontal navigation bullets will get on the spot response on slide
• Enhancement: added set off param in all callbacks
• Enhancement: added onScrollOverflow callback to trace Y place
• Enhancement: added getScrollY and getScrollX strategies to trace positions
• Enhancement: scrollable sections can now be scrolled programmatically
• Enhancement: verticalCentered will now use flexbox and will not wrap the content material
• Enhancement: sections will not use fastened peak in px in favour of 100vh
• Enhancement: fitToSection will now use native CSS snaps behaviour
• Enhancement: scrollOverflowReset will now admit slides and part values.
• Enhancement: modified the way in which extensions activation works
• Enhancement: modified the way in which fullPage.js license works
• Enhancement: new possibility credit
• Mounted bug: scrollbar:true prompted flickering
• Mounted bug: scrollOverflow unintended scrolling when studying sections’ backside
• Mounted bug: scrollOverflow sections weren’t scrollable by arrow keys
• Mounted bug: scrollOverflow prevented Vimeo video flip fullscreen
• Mounted bug: scrollOverflow prevented YouTube video flip fullscreen
• Mounted bug: scrollOverflow prevented using audio controls in IE
• Mounted bug: scrollOverflow prevented inputs clicks on cellular
• Mounted bug: navigation anchors & scrollBar did not permit quick clicks on menu
• Mounted bug: improper peak of part on IOS 13 and beneath
• Mounted bug: unusual backside rectangle on chrome android
• Mounted bug: jQuery adapter failed with minified file
• Mounted bug: some choices didnt work in minified information
• Eliminated: v2compatible possibility
• Eliminated: scrolloverflow.min.js dependency
• Eliminated: fitToSectionDelay possibility
• Eliminated: scrollOverflowOptions possibility
• Eliminated: IE 9 compatibility

v3.1.2 (2021-06-25)

• New Water Impact extension and new choices waterEffect and waterEffectOptions

v3.1.1 (2021-05-05)

• Mounted bug: callbacks weren’t getting fired after resize (or on cellular)

v3.1.0 (2021-02-18)

• New Drop Impact extension and new choices dropEffect and dropEffectOptions
• Mounted bug: Information anchors in URL not updating on scroll
• Mounted bug: On responsive mode callbacks usually are not firing
• Mounted bug: anchors not updating when utilizing possibility `sectionSelector
• Mounted bug: dragAndMove prompted gradual transition on goinb again to 1st slide on 1st part

v3.0.9 (2020-07-07)

• Mounted bug: normalScrollElements + scrollOverflow when no scrollbar created
• Mounted bug: setting isWindowFocused again to true after focus occasions to permit scrolling once more
• Mounted bug: scrollOverflow not work in Microsoft Edge #3840
• Mounted bug: Lazy load ignores fp-auto-height-reponsive #3944
• Mounted bug: error with normalScrollElements and mouse go away to debug console.
• Mounted bug: dragAndMove gradual transfer again to 1st slide inside part
• Mounted bug: fixing display screen readers data in horizontal slides bullets 
• Mounted bug: making use of only some anchors was inserting them within the improper sections
• Mounted bug: improper lively part when switching panorama to portrait when utilizing responsiveHeight #3897
• Mounted bug: added minimal transition laps when utilizing a really quick scrolling velocity
• Mounted bug: Responsive Slides extension was dropping listeners connected to components when switching modes
• Enhancement: vertical heart navigation utilizing 2D rework

v3.0.8 (2019-11-26)

• Mounted bug: normalScrollElement bug after clicking on the component
• Mounted bug: normalScroll + fastened component did not work nicely on firefox
• Mounted bug: overflow:scroll is not scrollable inside scrollOverflow

v3.0.7 (2019-07-11)

• Mounted bug: scrollOverflow not working in cellular
• Mounted bug: vendor minified information have been less than date
• Mounted bug: dist information weren’t updated

v3.0.6 (2019-07-10)

• Mounted bug: fb & instagram browser miscalculates web page peak
• Mounted bug: IOS 12 Progressive Net App Responsive resizing
• Mounted bug: OrientationChange breaks structure on Chrome cellular
• Mounted bug: Lazy loading fp-auto-height doesn’t load all photographs in viewport
• Mounted bug: origin param in afterLoad name again is null
• Mounted bug: content material will get hidden on the backside when utilizing lazyload:true and scrolloverflow:true
• Mounted bug: dragAndMove was not suitable with normalScrollElements
• Mounted bug: scrollOverflow final scroll prevents to scroll to the underside of a piece
• Mounted bug: improper navigation dot activated when utilizing continuousVertical
• Mounted bug: normalScrollElements & fancybox not working as anticipated
• Mounted bug: scrollOerflow + verticalCentered + paddingTop
• Mounted bug: center Mouse Scrolling is Damaged when utilizing autoScrolling:false
• Mounted bug: scrolloverflow IScroll is just not outlined when utilizing bundler
• Mounted bug: $(…).fullpage is just not a operate after destroy
• Mounted bug: Safari iOS – Vertical Align Bug
• Mounted bug: normalScrollElements & scrollBar:true & setAllowScrolling methodology not working collectively
• Enhancement: spacebar will not trigger scroll on HTML movies and audios
• Eliminated normalScrollElementTouchThreshold possibility

v3.0.5 (2019-04-11)

1. Added new choices playing cards and cardsOptions for the Playing cards extension
2. Mounted bug: scrollOverflow distributors file was not updated and created errors
3. Mounted bug: setAllowScrolling(false) was nonetheless stopping mouse actions on cellular
4. Mounted bug: dragAndMove slowed down when sliding to 1st slide
5. Mounted bug: scrollOverflow tilting when reaching backside
6. Mounted bug: $.fn.fullpage strategies not accessible in afterLoad
7. Mounted bug: recordHistory not working with scrollBar:true
8. Mounted bug: flickering error on Google Chrome 73
9. Mounted bug: scrollOverflow cannot scroll if modal closed on cellular
10. Mounted bug: enabling using a number of menu components
11. Enhancement: getFullpageData as operate
12. Enhancement: added touchWrapper possibility
13. Documentation: eradicating hyperlink from who’s utilizing fulllPage
14. Documentation: make clear that extensions are solely accessible for fullpage v3
15. Documentation: updating backers.md

v3.0.4 (2018-11-30)

• Updating model and dist information

v3.0.2 (2018-07-26)

• Updating model and dist information

v3.0.1 (2018-06-27)

• Updating model and dist information

v2.9.7 (2018-04-09)

• Updating model and dist information

v2.9.6 (2018-01-30)

• Updating model and dist information

v2.9.5 (2017-10-25)

• Updating model and dist information

v2.9.4 (2017-03-11)

• Added: lazy load for image srcset components

v2.9.3 (2017-03-01)

• Including parallax extension

v2.7.9 (2016-04-15)

v2.6.6 (2015-06-08)

• ixed mousewheel for outdated firefox variations
• Mounted bug with slimScroll 
• Mounted bug when utilizing scrollBar:true and opening a brand new tab (ctrl + t)
• Added new possibility lockAnchors to lock anchors #1198
• Added new possibility responsiveHeight 
• Added new possibility responsiveWidth changing the outdated possibility responsive
• Added new operate setLockAnchors 
• Modified setKeyboardScrolling operate to lock keyboard scrolling in particular instructions
• Added new performance to cancel the scroll earlier than it takes place
• Callback onSlideLeave has now a brand new parameter nextIndex
• Single slide inside part will not present navigation bullets 
• Added a brand new performance to lazy load photographs, movies and audio components.
• Added a brand new performance to play and cease movies/audios after they enter within the viewport

v2.6.5 (2015-05-01)

• Mounted bug utilizing scrollOverflow:true and autoScrolling:false #553
• Mounted bug utilizing zoom (ctrl + mouse)
• afterLoad callback will now hearth on web page render as nicely
• Mounted bug with setAllowScrolling proper and left
• Mounted bug which fired a number of callbacks when utilizing continuousVertical
• Added new methodology $.fn.fullpage.silentMove to scroll with no animation 
• Window resize has no animation now
• Added npm set up to the documentation
• Improved documentation about Creating hyperlinks to sections or slides and anchors
• Added some extra feedback within the code

v2.6.3 (2015-04-10)

• Solved bug with slide anchors

2014-09-20

• Double click on over bullets on contact units not wanted

2014-07-01

• Solved drawback with frequent selectors. 

This superior jQuery plugin is developed by alvarotrigo. For extra Superior Usages, please examine the demo web page or go to the official web site.