jQuery Plugin To Create Material Style Ripple Effects - ePulse

File Size: 15.6 KB
Views Total: 2630
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Create Material Style Ripple Effects - ePulse

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.

How to use it:

1. Load jQuery library and the jQuery ePulse plugin's script at the end of the document.

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

2. The CSS position of the target element must be either relative or absolute.

button {
  position: relative;
  ...
}

3. Call the function to enable the ripple effect on the 'button' element when clicking.

$("button").ePulse();

4. Customize the ripple effect.

// $("button").ePulse(options, callbackBeforeAnimation, callbackAfterAnimation);
$("button").ePulse({

  // animation speed
  speed: 'fast',

  // ripple size
  size: 'medium',

  // background color
  bgColor: '#fff100',

  // trigger event
  event: 'click',

  autoDelete: true,
  reverseOpacity: false,
  forceContainerStyles: false

});

This awesome jQuery plugin is developed by likerRr. For more Advanced Usages, please check the demo page or visit the official website.