Modern Material Ripple Plugin With jQuery And CSS3 - Pseudo Ripple

File Size: 8.22 KB
Views Total: 1012
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Modern Material Ripple Plugin With jQuery And CSS3 - Pseudo Ripple

Pseudo Ripple is a jQuery plugin for creating Material Design ripple click effects on DOM elements using CSS ::after pseudo-element.

The plugin uses CSS ::after to creates a pseudo-element on which the plugin renders the ripple effect. So you can customize the ripple click effect directly in the CSS.

See also:

How to use it:

1. Load the Stylesheet jquery-pseudo-ripple.css and JavaScript jquery-pseudo-ripple.js in the HTML document.

<link href="/path/to/jquery-pseudo-ripple.css" rel="stylesheet">
<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/jquery-pseudo-ripple.js"></script>

2. You can also use the jquery-pseudo-ripple-compact.css to exclude duration & size options.

<link href="/path/to/jquery-pseudo-ripple-compact.css" rel="stylesheet">

3. Attach the function ripple() to the desired element and done.

<div class="element">Click/Tap Me</div>

4. Apply your own CSS styles to the ripple effect.

.element::after {
  /* CSS rules here */

5. Customize the duration of the ripple effect. Default: 400ms.

  duration: 2000

6. Customize the easing function. Default: 400ms.

  ease: 'cubic-bezier(.4,0,.2,1)'

7. Set the size of the ripple from 0 to 10. Default: 1.

  size: 2

8. Trigger the ripple effect on mouse click instead of mouse down.

  onclick: true

9. Set the type of the ripple effect: 'centered', 'icon', 'trigger', 'target'.

  type: 'pointed'

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