Wave Background

What is it?

Wave Background is an interactive visual effect that generates layered waves moving across a canvas element, creating an ocean-like background animation. It allows developers to customize colors, positioning, and z-index, and it reacts to screen resizing and scroll events to ensure a dynamic and responsive user experience.

How to set it up?

To use the Wave Background, you need to apply specific data attributes:

'data-wave-background'. This attribute enables the wave effect on the target element.

'data-wave-color'. Defines the color preset for the wave effect. Available color presets are:

If not set, the default preset is "green".

'data-wave-zindex' (Optional). Defines the z-index for the wave canvas. This allows developers to control the stacking order of the wave animation relative to other elements.