Interactive Click/Tap Ripple Effect With Pure JavaScript – Ribble

Category: Animation , Javascript | February 26, 2018
Author:nash403
Views Total:866 views
Official Page:Go to website
Last Update:February 26, 2018
License:MIT

Preview:

Interactive Click/Tap Ripple Effect With Pure JavaScript – Ribble

Description:

Ribble is a standalone vanilla JavaScript plugin that applies the Material Design ripple click/tap effect to any DOM element you specify.

How to use it:

Download and import the Ribble library into the document.

<script src="dist/ribble.js"></script>

Attach the Ribble to any element you prefer.

<div class="demo" id="example"></div>
var myElement = document.getElementById("example");
Ribble.attachEvent(myElement)

Customize the ripple effect.

Ribble.attachEvent(myElement, {

  // duration in milliseconds
  duration: 400,

  // z-index
  zIndex: "9999",

  // background color
  bgColor: "currentColor",

  // max opacity level
  maxOpacity: "0.4",

  // easing function
  easing: "cubic-bezier(0.4, 0, 0.2, 1)"
  
})

Change the default trigger events.

Ribble.attachEvent(myElement, {

  // options here

}, 
  //  default: ['mousedown', 'touchstart']
triggers)

You Might Be Interested In:


Leave a Reply