Install the package from npm or any node package manager of your choice
npm i -D svelte-ripple-action
Import the CSS styles for the ripple effect.
import "svelte-ripple-action/ripple.css";
Import the directive from the package and use it on any element you want to have a ripple effect on
<script>
import { ripple } from "svelte-ripple-action";
</script>
<button use:ripple>Click me</button>
DONE! 🥳 you have a ripple effect on your element.
You can pass options to the ripple action to customize the ripple effect.
<script>
import { ripple } from "svelte-ripple-action";
</script>
<button use:ripple={options}>Click me</button>
boolean
By default, the ripple effect starts from the point where the user clicks on
the element. If you want the ripple effect to start from the center of the
element, you can pass the center
option.
<button use:ripple={{center:true}}>Click me</button>
string
The color of the ripple effect. You can pass any valid CSS color value to
the color
option.
<button
use:ripple={{
color: "rgba(255, 0, 0, 0.2)",
}}
style="background-color: white;color:red;border: 1px solid red;"
>
Red ripple
</button>
number
Duration of the ripple effect in seconds. You can pass any valid number to
the duration
option.
<button use:ripple={{duration:2}}>2 seconds</button>
<button use:ripple={{duration:0.2}}>0.2 seconds</button>
number
Maximum radius of the ripple effect. You can pass any valid number
maxRadius
option.
<button use:ripple={{maxRadius:200}} style="width: 400px; height: 200px;">200px</button>
Needs to be wrapped in a div for void elements like img, input, etc.
<div use:ripple class="box imgripple">Image ripple</div>
<div use:ripple class="box gradient">Gradient ripple</div>
<br />
<p>Needs to be wrapped in a div for void elements like img, input, etc.</p>
<div use:ripple class="imgbox">
<img
src="https://media.tenor.com/VFFJ8Ei3C2IAAAAM/rickroll-rick.gif"
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;
}
.imgbox {
height: 200px;
width: 200px;
border-radius: 5px;
margin-top: 20px;
margin-right: 20px;
display: inline-flex;
& img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.imgripple {
& .ripple {
background: url(https://media.tenor.com/VFFJ8Ei3C2IAAAAM/rickroll-rick.gif);
background-size: 80%;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
}
}
.gradient {
& .ripple {
background: linear-gradient(45deg, #f3ed783d, #af4261);
}
}
</style>