Read the use of fullPage.js Extensions before using the drop effect option.
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:
{ 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:
2300) defines the speed in milliseconds for the drop animation effect since beginning to end. color
#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
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. Applying it to specific sections and directions
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
setOption(optionName, value)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!");
}
}
}); dropEnds(origin, destination, direction)
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");
}
}
});
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4