<div id="fullpage">
<div class="section">
Section 1
</div>
<div class="section">
<div class="slide">
Slide 2.1
</div>
<div class="slide">
Slide 2.2
</div>
<div class="slide">
Slide 2.3
</div>
</div>
<div class="section">
Section 3
</div>
</div>new fullpage('#fullpage', {
dropEffect: true,
dropEffectOptions: [...],
onLeave: function(origin, destination, direction){
console.log("Leaving section" + origin.index);
},
navigation: true
});
Sure! You'll be able to define which sections have the effect and on which directions by simply adding the attribute data-drop in the sections where you want to have it.
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.
Yeap! Just use the methods fullpage_api.dropEffect.turnOn(); or fullpage_api.dropEffect.destroy(); whenever you need to.
Yes! You can in fact disable it whenever you want, but if you want to base it on the screen dimensions that's fine too. It's as easy as using the responsive options available in fullPage.js: responsiveWidth or responsiveHeight, where you define a threshold in pixels.
Nope! However you are entitled to a 30 days full refund as long as you do not activate the effect for any domain or ask for support. Read license terms.
It couldn't be otherwise! Yes, it is! Available for the official fullPage.js plugin for Elementor and Gutenberg builders for WordPress.
And soon for Divi too!
No. But you can get this effect and many more under a single package for a very reduced price. Check it out!
If you haven't seen you question answered here you can contact us and we will happily answer your questions.
Here you can define the extension settings