Extension Drop Effect

Read the use of fullPage.js Extensions before using the drop effect option.

• Live demo
• Option
  • Drop Effect Options
• Methods
• Callbacks

Option

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.

Drop Effect Options

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. 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.

Methods

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');

---

turnOn()

Enables the drop effect. Useful if you need to enable it dynamically at a certain point in time.

fullpage_api.dropEffect.turnOn();

---

destroy()

Turns off the drop effect.

fullpage_api.dropEffect.destroy();

Callbacks

In addition to the standard fullPage.js callbacks the Drop Effect adds a couple more.

dropLeaves(origin, destination, direction)

Fired when the drop effect starts moving out of the viewport after completely filling it. Both with the same exact parameters as the onLeave standard callback.

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");
		}
	}
});