Extension Water Effect

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

• Live demo
• Option
  • Water Effect Options
• Applying it to specific sections and directions
• Disabling it on mobile
• Methods
• Callbacks

Option

Option	Description
waterEffect type:[Boolean/Text]	(default false). Extension of fullPage.js. Possible values are true, false, sections or slides. Defines whether or not to use the water effect on sections / slides.
waterEffectOptions: type: Object	(default: { animateContent: true, animateOnMouseMove: true, speed: 700}). Allows to configure the parameters for the water effect when using the option waterEffect:true.

Water Effect Options

You can see them in action in the demo page

Description of the configurable options available within the option waterEffectOptions:

waterEffectOptions	Description
animateContent type: Boolean	(default true ) defines whether or not to animate and fade the sections/slides content when the background animation takes place.
animateOnMouseMove type: Boolean	(default true) determines if there will be a small water animation on mouse move or not.
speed type: number	(default 700) defines the speed in milliseconds for the water animation effect.

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-water 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 water effect on the first section when scrolling down you can use data-water="down" on the first section element.

<div id="fullpage">
    <div class="section" data-water="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', {
    waterEffect: true,

    // disabling fullpage and water 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 waterEffectOptions. (animateContent, animateOnMouseMove, speed).

//changing the value for the property `speed`
fullpage_api.waterEffect.setOption('speed', 6000);

//changing the value for the property `color`
fullpage_api.waterEffect.setOption('animateContent', false);

---

turnOn()

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

fullpage_api.waterEffect.turnOn();

---

destroy()

Turns off the water effect.

fullpage_api.waterEffect.destroy();