Extension Drop Effect
Read the use of fullPage.js Extensions before using the drop effect option.
- Live demo
- Video Tutorial
- Option
- Applying it to specific sections and directions
- Disabling it on mobile
- Methods
- Callbacks
| Option | Description |
|---|---|
|
dropEffect type:[Boolean/Text] |
(default false). Extension of fullPage.js. Possible values are true, false, sections or slides. Defines whether or not to use the drop effect on sections / slides. |
|
dropEffectOptions: type: Object |
(default: { speed: 2300, color: '#F82F4D', zIndex: 9999}). Allows to configure the parameters for the drop effect when using the option dropEffect:true. |
You can see them in action in the demo page
Description of the configurable options available within the option dropEffectOptions:
| dropEffectOptions | Description |
|---|---|
|
speed type: Number |
(default 2300) defines the speed in milliseconds for the drop animation effect since beginning to end. |
|
color type:[Text/Array] |
(default #F82F4D ) defines color of the drop effect. An array of colors can be passed to define a different color for each of the sections of the page (['red', '#F82F4D', 'purple']). Additional methods can be used to change the color dynamically. |
|
zIndex type: Number |
(default 9999 ) defines value assigned to the z-index property for the drop effect. It allows you to control the stack order of the effect in relation with other elements on the page. |
If you want to apply the effect only on certain sections or directions you can add the attribute data-drop on the sections where you want to apply it. The attribute accepts the following values: all, up, down.
For example, if you only want to have the drop effect on the first section when scrolling down you can use data-drop="down" on the first section element.
<div id="fullpage">
<div class="section" data-drop="down">Section 1</div>
<div class="section">Section 2</div>
</div>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', {
dropEffect: true,
// disabling fullpage and drop effect 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).
//changing the value for the property `speed`
fullpage_api.dropEffect.setOption('speed', 6000);
//changing the value for the property `color`
fullpage_api.dropEffect.setOption('color', 'blue');Enables the drop effect. Useful if you need to enable it dynamically at a certain point in time.
fullpage_api.dropEffect.turnOn();Turns off the drop effect.
fullpage_api.dropEffect.destroy();In addition to the standard fullPage.js callbacks the Drop Effect adds a couple more.
Both with the same exact parameters as the onLeave standard callback.
Fired when the drop effect starts moving out of the viewport after completely filling it.
new fullpage('#fullpage', {
dropLeaves: function(origin, destination, direction){
var leavingSection = this;
if(origin.index == 1 && direction =='down'){
alert("Going to section 3!");
}
else if(origin.index == 1 && direction == 'up'){
alert("Going to section 1!");
}
}
});Fired when the drop transition ends. Almost at the same time that afterLoad.
new fullpage('#fullpage', {
dropEnds: function(origin, destination, direction){
//using index
if(origin.index == 2){
alert("Section 3 ended loading");
}
//using anchorLink
if(origin.anchor == 'secondSlide'){
alert("Section 2 ended loading");
}
}
});