Ripple Effect
You can add ripple effect to your website with just single line of code
View Demo Here
DOCS
Installation
NPM
npm i ripple-effects
Unpkg (4kb)
<script src="https://unpkg.com/ripple-effects"></script>
Unpkg Unbabel Version (3kb) - IE Not Supported
<script src="https://unpkg.com/ripple-effects@1.0.2/dist/ripple.unbabel.min.js"></script>
Usage
import ripple "ripple-effects";
ripple(".card");
// with option
ripple(".card",{
background: "yellow",
triggerExcept: "button", // BUtton children of the card will not cause a trigger to the ripple
})
NOTE: Self closing tag is not allowed you need to wrap it
Examples
const elements = document.querySelectorAll('.card')
ripple(elements, {
background: 'radial-gradient(white,black)',
opacity: 0.4,
triggerExcept: 'button', // BUtton children of the card will not cause a trigger to the ripple
})
const body = document.body
ripple(body, {
background: 'white',
})
// You can also access the internal functions that i used
console.log(ripple.utils)
How to use it on frameworks
React
import React, { useEffect, useRef } from 'react'
import ripple from 'ripple-effects'
const buttonRipple = () => {
const button = useRef(null)
useEffect(() => {
ripple(button.current)
// or
ripple('.btn')
}, [])
return (
<button ref={button} className="btn btn-primary">
Ripple
</button>
)
}
Svelte
<script>
import ripple from 'ripple-effects'
</script>
<button use:ripple>Ripple</button>
API
ripple(element, option?)
option | default | type | description |
---|---|---|---|
background | rgb(150,150,150) | string? | change the backgroud color of the ripple |
opacity | 0.5 | number? | change the ripple opacity value |
width | width of the element | string? | specify the width of the ripple |
height | width of the element | string? | specify the height of the ripple |
duration | 700 (ms) | number? | speed of the animation |
outDuration | 800 (ms) | number? | when the element will remove |
zIndex | 99 | number? | you can adjust the zIndex |
triggerExcept | null | string? | Element | add an exception of an element to be triggered |
triggerOnChild | true | boolean? | ripple will triggered if you click the children elements |
timing | ease | string? | animation timing function of css |