Extension "Effects"
Read the use of fullPage.js Extensions before using the effects option.
| 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. Click on each preset to see its detailed configuration:
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'
}inertia - Smooth inertia-based sliding effect
{
useShadow: false,
skew: 5,
offset: {
past: -100,
future: 100
},
delay: {
past: 0,
future: 100
}
}coverInverted - Cover effect with inverted direction
{
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'
}coverZoomInverted - Cover zoom effect with inverted direction
{
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)'
}zoomStack - Stack effect with zoom animation
{
scale: {
past: 1,
future: 2
},
useShadow: false,
skew: 0,
offset: {
past: -100,
future: 100
},
delay: {
past: 0,
future: 0
},
visibility: {
past: 'hidden'
},
zIndex: 'inverted',
opacity: {
past: 1,
future: 1
},
shadow: '0 22px 100px 0 rgba(0, 0, 0, 0.7)'
}zoom - Simple zoom effect
{
scale: {
past: 1.3,
future: 1.3
},
useShadow: false,
offset: {
past: 0,
future: 0
},
opacity: {
past: 0,
future: 0
},
easing: {
past: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',
future: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)'
},
shadow: '0 22px 100px 0 rgba(0, 0, 0, 0.7)',
zIndex: 'inverted'
}stackFade - Stack effect with fade animation
{
scale: {
past: 1,
future: 1
},
useShadow: false,
skew: 0,
offset: {
past: -100,
future: 20
},
delay: {
past: 0,
future: 100
},
visibility: {
past: 'hidden'
},
zIndex: 'inverted',
opacity: {
past: 1,
future: 0
},
shadow: '0 22px 100px 0 rgba(0, 0, 0, 0.7)'
}elastic - Elastic stretching effect
{
scale: {
past: '1, 4',
future: '1, 4'
},
useShadow: false,
skew: 0,
offset: {
past: -100,
future: 100
},
delay: {
past: 0,
future: 100
},
transformOrigin: {
past: '50% 100%',
future: '50% 0%'
},
visibility: {
past: 'hidden'
},
zIndex: 'inverted',
opacity: {
past: 1,
future: 1
},
shadow: '0 22px 100px 0 rgba(0, 0, 0, 0.7)'
}innerCube - Inner cube rotation effect
{
useShadow: false,
offset: {
past: -100,
future: 100
},
opacity: {
past: 0.3,
future: 0.3
},
perspective: 1000,
transformOrigin: {
past: '50% 100%',
future: '50% 0%'
},
rotate: {
past: '1, 0, 0, -90deg',
future: '1, 0, 0, 90deg'
},
delay: {
past: 0,
future: 0
},
shadow: '0 22px 100px 0 rgba(0, 0, 0, 0.7)',
zIndex: 'natural'
}push - Push effect with 3D rotation
{
useShadow: false,
offset: {
past: 0,
future: 100
},
opacity: {
past: 0,
future: 0
},
perspective: 1000,
transformOrigin: {
past: '50% 0%',
future: '50% 100%'
},
rotate: {
past: '1, 0, 0, -90deg',
future: '0, 0, 0, 0'
},
delay: {
past: 0,
future: 100
},
shadow: '0 22px 100px 0 rgba(0, 0, 0, 0.7)',
zIndex: 'natural'
}zoomOut - Zoom out effect
{
scale: {
past: 0.8,
future: 0.8
},
useShadow: false,
offset: {
past: 0,
future: 0
},
opacity: {
past: 1,
future: 0
},
delay: {
past: 0,
future: 700
},
shadow: '0 22px 100px 0 rgba(0, 0, 0, 0.7)',
zIndex: 'natural'
}fadeStack - Fade effect with stacking
fadeStack: {
scale: {
past: 1,
future: 0.8
},
useShadow: false,
offset: {
past: 0,
future: 0
},
opacity: {
past: 1,
future: 0
},
shadow: '0 22px 100px 0 rgba(0, 0, 0, 0.7)',
zIndex: 'natural'
}Example usage:
new fullpage('#fullpage', {
effects: 'coverZoom' // Using a preset
});
// Or with custom options:
new fullpage('#fullpage', {
effects: true,
effectsOptions: {
scale: { past: 0.7, future: 1 },
offset: { past: -100, future: 100 },
opacity: { past: 0.2, future: 1 }
}
});| 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. |
Here's a complete example object showing all possible effect parameters:
const effectsOptions = {
scale: {
past: 0.8, // Scale for sections that moved up
future: 1 // Scale for sections that will move up
},
offset: {
past: -100, // Y-axis offset in pixels for sections that moved up
future: 100 // Y-axis offset for sections that will move up
},
opacity: {
past: 0.5, // Opacity for sections that moved up (0-1)
future: 1 // Opacity for sections that will move up (0-1)
},
delay: {
past: 200, // Animation delay in ms for sections moving up
future: 300 // Animation delay for upcoming sections
},
visibility: {
past: 'hidden' // Visibility of past sections ('visible' or 'hidden')
},
rotate: {
past: '1, 0, 0, -30deg', // 3D rotation for past sections (x, y, z, angle)
future: '1, 0, 0, 30deg' // 3D rotation for future sections
},
transformOrigin: {
past: '50% 100%', // Transform origin point for past sections
future: '50% 0%' // Transform origin point for future sections
},
perspective: 1000, // 3D transform perspective depth in pixels
zIndex: 'natural', // Section stacking order ('natural' or 'inverted')
skew: 0, // Skew transformation in degrees
useShadow: true, // Enable/disable shadow effect
shadow: '0 22px 100px 0 rgba(0, 0, 0, 0.7)' // Custom shadow CSS value
};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 effectsOptions. (color, speed or zIndex).
// setting a new value for the delay.past option
fullpage_api.effects.setOption('options', {delay: {past: 200}});
// setting a new effect using a preset name
fullpage_api.effects.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();