Default
DefaultYou can define the starting section and slide by adding the class active
to them.
Horizontal Slides
Horizontal SlidesA 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.
Custom Animation
Custom AnimationYou can get different 'easing' animations from pages like https://matthewlein.com/tools/ceaser or https://easings.net/
Bullet Navigation
Bullet NavigationOptionally, 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;
}
Menu
MenufullPage.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.
Scroll Bar
Scroll BarIt 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
Scroll Inside Sections
Scroll Inside SectionsYou 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.
Normal Scroll
Normal ScrollThe 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
URL Anchors
URL AnchorsThere 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).
Hide Sections
Hide SectionsYou 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.
Continuous Vertical
Continuous VerticalNot compatible with the follwing options:
- loopTop: true
- loopBottom: true
- scrollBar: false
- autoScrolling: false
Autoplay Media
Autoplay MediaVideos 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.
Scrollable Elements
Scrollable ElementsBe 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.
Parallax EffectExtension
Parallax EffectThe parallax
option is not compatible with:
- Smaller or larger sections using the class fp-auto-height
Fading EffectExtension
Fading EffectIt can be turned on for sections and slides or just for one of them.
Use: fadingEffect: true
, fadingEffect: 'slides'
. or fadingEffect: 'sections'
Drag And MoveExtension
Drag And MoveThe dragAndMove
option is not fully compatible with:
- parallax
Skip Sections
Skip SectionsThis 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.
Fixed Backgrounds
Fixed BackgroundsNotice 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.
Animations
AnimationsYou 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.
Padding
PaddingYou 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.