fullPage.js Playground - Interactive Demo

Scrolling Speed?Speed in milliseconds for the scrolling transitions. The smaller the value, the faster the scroll. 700
Auto Scrolling?Enable/disable the automatic scrolling (snap scroll effect) while using the mouse wheel/trackpad
Fit To Section?Snaps to the nearest section so it always fits perfectly in the screen if you stopped halfway while scrolling.
Fit To Section Delay?The delay in milliseconds before snapping the section to the screen 600
Touch/Mouse Dragging ?
Drag sections & slides with the mouse or finger.
Scroll Horizontally ?
Slide horizontally inside horizontal sliders by scrolling vertically with the mouse wheel or trackpad.
Scrollbar?Show the browser's scrollbar when snapping to sections.
Normal Scroll Elements?Specify which elements should allow regular scrolling inside them without triggering a section scroll. Typically used for modals, menus, scrollable containers, interactive elements, maps etc.
Elements Selector?CSS selector for elements that should maintain normal scrolling behavior
Scroll Overflow?Creates an inner scroll bar for the section/slide in case its content is bigger than the viewport
Reset Overflow??
Enable Mac-style scrollbars for overflow content

Scroll Overflow Mac Style?Enable Mac-style scrollbars for Windows for overflow content
Skip Intermediate Items?Skip sections/slides in between when moving between non consecutive sections/slides. Check it out using bullet or menu navigation.

Loop Bottom?Scroll up from the last section to the first one when reaching the end
Loop Top?Scroll down from the first section to the last one when reaching the top
Loop Horizontal?Loop through slides by jumping from the last back to the first, or the first to the last.
Infinite Vertical?Creates a continuous vertical loop — when you keep scrolling past the last section, you smoothly return to the first without reversing direction, and vice versa.
Infinite Horizontal?
Creates a continuous horizontal loop — keep sliding past the last slide to go back to the first, or past the first to reach the last, all in the same direction. Use the slide arrows or the keyboard to check it out.

Menu?Show a fixed menu with links to each section/slide. fullPage.js will automatically change the active class of each item on the menu based on the active section.
Slide Arrows?Display left and right arrows for horizontal slide navigation.
Navigation Bullets?Show the navigation dots for vertical navigation
Navigation Position?Define the position for the navigation dots: left or right
Navigation Tooltips?Show tooltips when hovering the navigation dots
Show Active Tooltip?Show the tooltip of the active section permanently
Slides Navigation Bullets?Show the navigation dots for horizontal navigation
Slides Navigation Position?Define the position for the slides navigation dots: top or bottom
Reset Sliders?
Resets the horizontalslides in a section back to the first one when you leave that section.

Parallax Backgrounds ?
Creates a parallax effect where backgrounds move at a different speed than the content, adding depth to scrolling
Effects?
Adds tens of visual animations and transitions for your slides. Zomming, scaling, stacking, 3d cubes, fading etc.

Background page color?

Easings ?
Set the acceleration for sections and slides animations when using the snap effect.
Choose your own easings functions from this page or this page

CSS 3?Use CSS3 transitions for smooth scrolling.
Lazy Loading?Enable/disable lazy loading of media elements (images, videos, iframes)

Lazy Load Threshold?

Responsive?Define breakpoints to disable the snap behavior based on window width/height.

Responsive Width?

Responsive Height?

Responsive Slides?

Keyboard Navigation?Enable keyboard navigation using arrow keys, spacebar, page up/down, home, end, etc.
Animate Anchor?Enable the scroll animation to the section when using direct links with anchors / hash pointing to a specific section or slide. (Try refreshing the page on a new window when on section 2, slide 2.2)
Record History?Adds each section or slide with a URL hash to the browser’s history, allowing users to navigate with the back and forward buttons.

↓ Scroll Down ↓