Extension "Effects"
Read the use of fullPage.js Extensions before using the effects option.
- Live demo
- Video Tutorial
- Option
- Applying it to specific sections and directions
- Disabling it on mobile
- Methods
- Callbacks
| Option | Description |
|---|---|
|
effects type:[Boolean/String] |
(default false). Enables or configures the effects extension. Possible values are false, true, or a preset name as string to use predefined effect settings. |
|
effectsOptions: type: Object |
(default: {}). Allows to configure the parameters for the effects when using effects:true. Available options detailed below. |
Instead of configuring all options manually, you can use one of these predefined presets by passing its name as a string to the effects option:
-
stack- Stacks sections on top of each other -
stackCover- Sections cover the previous ones while stacking -
scale- Scales sections while moving -
scaleFade- Combines scaling with fade effect -
cover- Sections slide over previous ones -
coverInverted- Inverted version of the cover effect -
coverZoom- Cover effect with zoom animation -
coverZoomInverted- Inverted version of coverZoom -
door- 3D door opening effect -
zoomStack- Combines zoom with stacking -
zoom- Simple zoom effect -
vortex- Rotating vortex effect -
focus- Focus/unfocus effect while scrolling -
stackFade- Stack effect with fade -
elastic- Elastic movement effect -
carousel3d- 3D carousel rotation -
cube- 3D cube rotation -
innerCube- Inner cube rotation effect -
push- Push effect between sections -
zoomOut- Zoom out animation -
fadeStack- Fade effect with stacking
Example usage:
new fullpage('#fullpage', {
effects: 'coverZoom' // Using a preset
});Click on each preset to see its detailed configuration. You can copy and modify these configurations when using effectsOptions:
stack - Stacks sections on top of each other
{
scale: {
past: 1,
future: 1
},
useShadow: true,
offset: {
past: -100,
future: 0
},
opacity: {
past: 1,
future: 1
},
shadow: '0 22px 100px 0 rgba(0, 0, 0, 0.7)',
zIndex: 'inverted'
}stackCover - Sections cover the previous ones while stacking
{
scale: {
past: 1,
future: 1
},
useShadow: true,
offset: {
past: 0,
future: 100
},
opacity: {
past: 1,
future: 1
},
shadow: '0 22px 100px 0 rgba(0, 0, 0, 0.7)',
zIndex: 'natural'
}scale - Scales sections while moving
{
scale: {
past: 0.85,
future: 1
},
useShadow: true,
offset: {
past: -100,
future: 0
},
opacity: {
past: 1,
future: 1
},
shadow: '0 22px 100px 0 rgba(0, 0, 0, 0.7)',
zIndex: 'inverted'
}scaleFade - Combines scaling with fade effect
{
scale: {
past: 0.8,
future: 1
},
useShadow: false,
offset: {
past: -80,
future: 0
},
opacity: {
past: 0,
future: 1
},
shadow: '0 22px 100px 0 rgba(0, 0, 0, 0.7)',
zIndex: 'inverted'
}cover - Sections slide over previous ones
{
scale: {
past: 0.8,
future: 1
},
useShadow: true,
offset: {
past: 0,
future: 100
},
opacity: {
past: 0,
future: 1
},
shadow: '0 22px 100px 0 rgba(0, 0, 0, 0.7)',
zIndex: 'natural'
}coverZoom - Cover effect with zoom animation
{
scale: {
past: 0.5,
future: 1
},
useShadow: true,
skew: 0,
offset: {
past: 0,
future: 100
},
delay: {
past: 0,
future: 400
},
easing: {
past: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)'
},
visibility: {
past: 'hidden'
},
zIndex: 'natural',
opacity: {
past: 1,
future: 1
},
shadow: '0 22px 100px 0 rgba(0, 0, 0, 0.7)'
}door - 3D door opening effect
{
perspective: 500,
scale: {
past: 1,
future: 1
},
easing: {
past: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)'
},
useShadow: false,
offset: {
past: 0,
future: 100
},
rotate: {
past: '1, 0, 0, -10deg',
future: '1, 0, 0, 3deg'
},
transformOrigin: {
past: '50% 0%',
future: '50% 0%'
},
opacity: {
past: 0.2,
future: 1
},
delay: {
past: 0,
future: 300
},
visibility: {
past: 'hidden'
},
shadow: '0 22px 100px 0 rgba(0, 0, 0, 0.7)',
zIndex: 'natural'
}carousel3d - 3D carousel rotation
{
perspective: 1000,
scale: {
past: 0.8,
future: 0.8
},
useShadow: false,
offset: {
past: -100,
future: 100
},
rotate: {
past: '1, 0, 0, -30deg',
future: '1, 0, 0, 30deg'
},
transformOrigin: {
past: '50% 50%',
future: '50% 50%'
},
opacity: {
past: 0,
future: 0
},
shadow: '0 22px 100px 0 rgba(0, 0, 0, 0.7)',
zIndex: 'inverted'
}cube - 3D cube rotation
{
perspective: 300,
scale: {
past: 1,
future: 1
},
useShadow: false,
offset: {
past: -100,
future: 100
},
rotate: {
past: '1, 0, 0, 30deg',
future: '1, 0, 0, -30deg'
},
transformOrigin: {
past: '50% 100%',
future: '50% 0%'
},
opacity: {
past: 1,
future: 1
},
shadow: '0 22px 100px 0 rgba(0, 0, 0, 0.7)',
zIndex: 'inverted'
}vortex - Rotating vortex effect
{
scale: {
past: 1.3,
future: 0.7
},
rotate: {
past: '0, 0, 1, -3deg',
future: '0, 0, 1, 3deg'
},
useShadow: false,
offset: {
past: 0,
future: 0
},
opacity: {
past: 0,
future: 0
},
shadow: '0 22px 100px 0 rgba(0, 0, 0, 0.7)',
zIndex: 'inverted'
}focus - Focus/unfocus effect while scrolling
{
scale: {
past: 0.8,
future: 0.8
},
useShadow: false,
offset: {
past: -100,
future: 100
},
opacity: {
past: 0,
future: 0
},
shadow: '0 22px 100px 0 rgba(0, 0, 0, 0.7)',
zIndex: 'inverted'
}| Option | Description |
|---|---|
| scale | (default: 1). Controls the scaling factor for sections. past affects sections that have moved up, future affects sections that will move up. Values are numbers where 1 represents normal size. |
| offset | (default: 0). Defines the Y-axis offset in pixels for sections. past determines how far up previous sections move, future determines how far down upcoming sections start. |
| opacity | (default: 1). Sets the opacity level for sections. past controls visibility of sections that moved up, future controls sections that will move up. Values range from 0 to 1. |
| delay | (default: 0). Specifies animation delay in milliseconds for sections. past sets delay for sections moving up, future sets delay for upcoming sections. |
| visibility | (default: visible). Determines if past sections remain visible after moving out of view. Currently only supports past property with 'hidden' value. |
| rotate | (default: 0, 0, 0, 0). Defines 3D rotation for sections using rotate3d transform. Format is 'x, y, z, angle'. past rotates previous sections, future rotates upcoming sections. |
| transformOrigin | (default: 50% 100% for past, 50% 0% for future). Sets the origin point for transformations. |
| perspective | (default: 1000). Defines the perspective depth for 3D transforms in pixels. Higher values create less dramatic 3D effects. |
| zIndex | (default: natural). Determines z-index stacking order. Can be "natural" (lower sections have lower z-index) or "inverted" (lower sections have higher z-index). |
| skew | (default: 0). Applies a skew transformation to sections in degrees. A value of 0 means no skew. |
| useShadow | (default: false). Boolean flag to enable/disable drop shadow effect on sections during movement. |
| shadow | (default: CSS shadow value). Customizes the CSS shadow property for sections. |
Below is the complete structure of the effectsOptions object showing all available options and their organization. This provides a quick overview of how to structure your configuration:
const effectsOptions = {
// Scale transformation (1 = normal size)
scale: {
past: 1, // Scale for sections that moved up
future: 1 // Scale for sections that will move up
},
// Vertical offset in pixels
offset: {
past: 0, // How far up previous sections move
future: 0 // Starting position for upcoming sections
},
// Opacity values (0 to 1)
opacity: {
past: 1, // Opacity for sections that moved up
future: 1 // Opacity for sections that will move up
},
// Animation delay in milliseconds
delay: {
past: 0, // Delay for sections moving up
future: 0 // Delay for upcoming sections
},
// Visibility settings
visibility: {
past: 'visible' // Can be 'visible' or 'hidden'
},
// 3D rotation (format: 'x, y, z, angle')
rotate: {
past: '0, 0, 0, 0',
future: '0, 0, 0, 0'
},
// Transform origin point
transformOrigin: {
past: '50% 100%', // Bottom center
future: '50% 0%' // Top center
},
// 3D perspective depth (pixels)
perspective: 1000,
// Z-index stacking strategy
zIndex: 'natural', // or 'inverted'
// Skew transformation (degrees)
skew: 0,
// Shadow effects
useShadow: false,
shadow: '0 22px 100px 0 rgba(0, 0, 0, 0.7)'
}This configuration object gives you complete control over the animation and appearance of your sections. Most properties support both past and future values to create different effects for sections moving up versus those about to move. You can customize as many or as few of these options as needed - any omitted options will use their default values.
You can disable the effect based on the screen dimensions in the same way that you can disable fullPage.js snap effect.
Use the responsive options available in fullPage.js: responsiveWidth or responsiveHeight, where you define a threshold in pixels.
new fullpage('#fullpage', {
effects: 'focus',
// disabling fullpage and slider effects under 1000px width
responsiveWidth: 1000
}You can see them in action in the demo page
Sets a value for a given option. optionName can be any of of the options available in dropEffectOptions. (color, speed or zIndex).
// setting a new value for the delay.past option
fullpage_api.dropEffect.setOption('options', {delay: {past: 200}});
// setting a new effect using a preset name
fullpage_api.dropEffect.setOption('preset', 'vortex');Enables the drop effect. Useful if you need to enable it dynamically at a certain point in time.
fullpage_api.effecs.turnOn();Turns off the drop effect.
fullpage_api.effecs.turnOff();