Ziro Components

<ziro-splash>

<ziro-splash> allows you to add splash effects.

Basic Example

The splash effect will be bounded by the first ancestor element that is set to relative positioning.

HTML

<button>
  Click Me
  <ziro-splash></ziro-splash>
</button>

CSS

button {
  position: relative;
}

Speed Example

You can increase and decrease the speed of the animation with the speed attribute. The speed should be any number greater than 0. The default speed is 1.

HTML

<button>
  Click Me
  <ziro-splash speed="0.25"></ziro-splash>
</button>

CSS

button {
  position: relative;
}

Opacity Example

You can increase and decrease the opacity of the animation with the opacity attribute. The opacity should be greater than 0 and less than 1. The default opacity is 0.5

HTML

<button>
  Click Me
  <ziro-splash opacity="1"></ziro-splash>
</button>

CSS

button {
  position: relative;
}