@inotom/sws-ripple-box NPM

sws-ripple-box

A web Components to add ripple animation to some element.

Demo

Usage

Place sws-ripple-box custom element.

<sws-ripple-box>
  <div>
    Hello World
  </div>
</sws-ripple-box>
<script type="module" src="sws-ripple-box.min.js"></script>

Set element's style etc... by css custom properties.

sws-ripple-box {
  --sws-ripple-box-color: rgba(255, 255, 255, 0.5);
  --sws-ripple-box-border-radius: 100%;
  --sws-ripple-box-scale-up-size: 1.2;
  --sws-ripple-box-shadow-blur-radius: 10px;
  --sws-ripple-box-shadow-spread-radius: 2.5px;
  --sws-ripple-box-animation-duration: 2000ms;
  --sws-ripple-box-animation-delay: 1000ms;
  --sws-ripple-box-animation-count: infinite;
  --sws-ripple-box-animation-timing-function: ease-out;
  --sws-ripple-box-clip-path: none;
}

CSS custom properties

css custom property name	content	defaults
`--sws-ripple-box-color`	Ripple box-shadow color	`rgba(255, 255, 255, 0.5)`
`--sws-ripple-box-border-radius`	Box border-radius	`100%`
`--sws-ripple-box-scale-up-size`	Ripple transform scale up size	`1.2`
`--sws-ripple-box-shadow-blur-radius`	Ripple box-shadow blur radius	`10px`
`--sws-ripple-box-shadow-spread-radius`	Ripple box-shadow sperad radius	`2.5px`
`--sws-ripple-box-animation-duration`	Animation duration	`2000ms`
`--sws-ripple-box-animation-delay`	Animation delay	`1000ms`
`--sws-ripple-box-animation-count`	Animation count	`infinite`
`--sws-ripple-box-animation-timing-function`	Animation timing function	`ease-out`
`--sws-ripple-box-clip-path`	Limit the range of mouse events	`none`

Options

<sws-ripple-box
  mode="static"
>
  <div>
    Hello World
  </div>
</sws-ripple-box>

option name	content	defaults
`mode`	If `static` is set, it will be played automatically and infinite.

License

MIT

Author

inotom

lit-element tslib

@infinitebrahmanuniverse/nolb-_ino @everything-registry/sub-chunk-464

1.1.0

4 years ago

1.0.0

4 years ago