🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

ePulse is an easy to use jQuery plugin which helps you implement a Material Design inspired ripple effect on a given element with AMD and Commonjs support.

Material-Design ripple-effect

Documentation

ePulse

Lightweight(1.7kb) jQuery plugin for creating ripple effects on event occurrence

Install

npm

If you use build system that supports CommonJS or AMD modules, then install through npm

npm install jquery-epulse

Then include in your *.js file

require('jquery-epulse');

bower

In future releases

manual

For manual installation you can download one of the latest release or clone this repo:

git clone https://github.com/likerRr/jquery-epulse.git

Then just include plugin in your html

<script src="/dist/jquery-epulse.min.js"></script>

There are 3 different versions available for including:

  • /dist/dev.jquery-epulse.min.js - contains minified code and sourcemap for developing purposes
  • /dist/jquery-epulse.min.js - minified, ready for production version
  • /dist/jquery-epulse.js - built from source version

How to

ePulse is jQuery plugin, so you can use it like other jQuery functions. So, here is simple ripple effect example:

button {   // for proper work, position must be either relative or absolute   position: relative;   overflow: hidden;   // simple button styles   background: #9C27B0;   color: white;   padding: 5px;   border: transparent; }
<button>I'm a button</button>
$.fn.ripple = function() {   $(this).ePulse({bgColor: 'rgba(225, 190, 231, 0.5)', event: 'mousedown'}); } $("button").ripple();

LICENSE

http://likerrr.mit-license.org


You May Also Like