Extension Drop Effect

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

• Live demo
• Video Tutorial
• Option
  • Drop Effect Options
• Applying it to specific sections and directions
• Disabling it on mobile
• 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 (['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.

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>

Disable on mobile

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
}

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. Both with the same exact parameters as the onLeave standard callback.

dropLeaves(origin, destination, direction)

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