Svelte ripple action
Svelte directive for a ripple effect
npm i svelte-ripple-action
Installation
Install the package from npm
npm i svelte-ripple-actionUsage
Import the base styles inside the root of your app
<script>
import "svelte-ripple-action/ripple.css"
</script>Use the directive in your components
<script>
import { ripple } from "svelte-ripple-action";
</script>
<button use:ripple>Click me</button>Options
You can pass an object to the directive to customize the ripple effect
color?: string
duration?: number
maxRadius?: number
center?: boolean
disabled?: boolean
Preview
<button
use:ripple={{
color: "rgba(255,255,255,0.2)",
duration: 0.6,
maxRadius: 0,
center: false,
disabled: false,
}}
>
Click me
</button>Other examples
Image ripple
Gradient ripple
Needs to be wrapped in a div for void elements like img, input, etc.
<script>
import { ripple } from "svelte-ripple-action";
</script>
<div use:ripple class="box imgripple">Image ripple</div>
<div use:ripple class="box gradient">Gradient ripple</div>
<br />
<br />
<p>Needs to be wrapped in a div for void elements like img, input, etc.</p>
<div use:ripple class="imgbox">
<img
src="...."
alt="Man dancing"
/>
</div>
<div
use:ripple={{
color: "rgba(0,0,0,0.5)",
}}
>
<input type="text" placeholder="Type something" style="width: 100%;" />
</div>
<style>
.box {
height: 200px;
width: 200px;
align-items: center;
justify-content: center;
border: 1px solid black;
border-radius: 5px;
margin-top: 20px;
margin-right: 20px;
display: inline-flex;
user-select: none;
}
.imgbox {
height: 200px;
width: 200px;
border-radius: 5px;
margin-top: 20px;
margin-right: 20px;
display: inline-flex;
}
.imgbox img {
width: 100%;
height: 100%;
object-fit: cover;
}
:global(.imgripple .ripple) {
background: url(.....);
background-size: 80%;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
}
:global(.gradient .ripple) {
background: linear-gradient(
45deg,
#f3ed783d,
#af4261
);
}
</style>