Default

Default
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox

You can define the starting section and slide by adding the class active to them.

Loading...

Horizontal Slides

Horizontal Slides
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox

A section can contain horizontal slides. In this case we have a single section containing 4 horizontal slides.

You can use the Scroll Horizontally extension if you want them to be scrollable with the mousewheel or trackpad.

Loading...

Custom Arrows

Custom Arrows
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox
Loading...

Custom Animation

Custom Animation
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox

You can get different 'easing' animations from pages like https://matthewlein.com/tools/ceaser or https://easings.net/

Loading...

Bullet Navigation

Bullet Navigation
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox

Optionally, you can define the navigation tooltips by using the option navigationTooltips or the HTML attribute data-tooltip on each vertical section.

To change their color or style, you can overwrite their CSS using:


/* Overwriting styles for the navigation dots */
#fp-nav ul li a span, 
.fp-slidesNav ul li a span{
    background: white;
}

Loading...

Menu

Menu
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox

fullPage.js provides a way to automatically 'link' your own menu with the vertical sections, so it can not only link to them but also highlight the active item.

Note that fullPage.js will not style the menu for you, you need to provide the styling.

Although not directly, fullPage.js also provides ways to also link the menu with horizontal slides. See this demo.

Loading...

Scroll Bar

Scroll Bar
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox

It is specially useful if you want to trigger scroll-based animations.

Any thir-party component relying on scrolling might need this setting to be set to true. Parallax effects, Scroll Magic, Skrollr...

It will need to be set to false to use the fullPage.js option continuousVertical: true

Loading...

Scroll Inside Sections

Scroll Inside Sections
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox

You can decide not not use inner scrolling on specific sections by adding the class fp-noscroll on a specific section or slide.

If you want to avoid having a scrollable section or slide when on responsive mode (triggered by the responsiveWidth or the responsiveHeight options), you can add the class fp-auto-height-responsive to that specific section or slide.

Loading...

Normal Scroll

Normal Scroll
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox

The option recordHistory is automatically turned off when using autoScrolling: false.

The following options are not compatible with autoScrolling: false:

- continuousVertical: true

- fadingEffect: true

- scrollHorizontally: true

Loading...

URL Anchors

URL Anchors
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox

There are two ways to define anchors:

- By using the anchors option for the vertical sections only.

- Or by using the HTML data-anchor attribute on each section and slide.

Be careful! data-anchor tags or the values in the anchors option cannot have the same value as any ID element on the site (or NAME element for IE).

Loading...

URL History

URL History
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox
Loading...

Auto Height

Auto Height
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox
Loading...

Hide Sections

Hide Sections
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox

You can hide sections are slides dynaically. fullPage.js will adapt.

This comes on handy on responsive sites where you might want to hide certain slides or sections on small screen devices.

Loading...

Continuous Vertical

Continuous Vertical
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox

Not compatible with the follwing options:

- loopTop: true

- loopBottom: true

- scrollBar: false

- autoScrolling: false

Loading...

Offset SectionsExtension

Offset Sections
Demo
Loading...

State Classes

State Classes
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox
Loading...

Keyboard

Keyboard
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox
Loading...

Lazy Load

Lazy Load
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox

You can also define the lazyLoadThreshold, by default is 0.

Loading...

Auto Height Responsive

Auto Height Responsive
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox
Loading...

Autoplay Media

Autoplay Media
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox

Videos will only auto-play in desktop devices due to browser limitations.

Youtube videos won't autoplay in Chrome unless you use the parameter ?mute=1 on the src attribute URL.

Loading...

Callbacks

Callbacks
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox
Loading...

Methods

Methods
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox
Loading...

Loop Vertical

Loop Vertical
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox

Not compatible with the option continuousVertical: true

Loading...

Loop Horizontal

Loop Horizontal
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox

Not compatible with continuousHorizontal: true

Loading...

Scrollable Elements

Scrollable Elements
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox

Be careful! This option should not be applied to any section/slide element itself.

As an alternative in some cases, such as modals for example, you can also use setAllowScrolling(false) when the element gets shown and setAllowScrolling(true) when it gets closed.

Loading...

Reset Horizontal SlidersExtension

Reset Horizontal Sliders
Demo
Loading...

Parallax EffectExtension

Parallax Effect
Demo

The parallax option is not compatible with:

- dragAndMove

- offsetSections

- Smaller or larger sections using the class fp-auto-height

Loading...

Fading EffectExtension

Fading Effect
Demo

It can be turned on for sections and slides or just for one of them.

Use: fadingEffect: true, fadingEffect: 'slides'. or fadingEffect: 'sections'

Loading...

Interlocked SlidesExtension

Interlocked Slides
Demo
Loading...

Skip Sections

Skip Sections
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox

This option allows you to jump directly to the destination without any animation when the destination is not an immediate sibling in the current section or slide.

Loading...

Backgrounds

Backgrounds
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox
Loading...

Fixed Backgrounds

Fixed Backgrounds
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox

Notice we have disabled CSS 3 transformations by using the fullPage.js option css3: false.

This is required when using fixed elements inside the fullPage.js wrapper. Read more.

Loading...

Gradient Backgrounds

Gradient Backgrounds
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox
Loading...

Video Backgrounds

Video Backgrounds
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox
Loading...

Play Video on Scroll

Play Video on Scroll
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox
Loading...

Fixed Header

Fixed Header
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox
Loading...

Custom JS Animation

Custom JS Animation
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox
Loading...

Scrolling Speed

Scrolling Speed
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox
Loading...

Animations

Animations
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox

You can trigger animations in mutiple ways:

- Using CSS State classes

- Using fullPage.js Callbacks

- Or using scroll-based animations like in any other page

To trigger scroll based animations you'll need to use the option scrollBar: true. This will enable the scroll bar on fullPage.js.

Loading...

Padding

Padding
  • Preview
  • HTML
  • JS
  • CSS
Demo CodeSandbox

You can use CSS to set the padding to one or multiple sections or slides.

Alternatlively, you can use the options paddingTop and paddingBottom to set the

padding for all sections and slides.

Loading...