Ripple Effect

You can add ripple effect to your website with just single line of code

View Demo Here

DOCS

• Installation
• Usage
• Examples
• API
• How to use it on frameworks

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/[email protected]/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 |