Ripple Effect

You can add ripple effect to your website with just single line of code. View Demo Here

Extension Note

Thanks to creator, This repo forked from here and fix scrolling issue on mobile and touch screen devices. To reproduce the mentioned problem you can add this effect to a list of nodes and scroll on them, what is happening is when you expected a scroll you will always encounter ripple effect on elements also(because you actually first touched and then scroll, and it will correspond it as a click event). This repo fixed issue by adding the touchScrollTimeout property. If you start scrolling it waits for certain timeout, if you scroll before timeout it will clear and don't fire and wait for another event else it will go on its own way of default behaviour.

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 | | touchScrollTimeout| 100 | number? | [described here in details](#Extension Note)