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();