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:

• Material Design Toast Plugins
• Material Design Snackbar Plugins
• Material Design Resources

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>

$('.element').ripple();

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.

$('.element').ripple({
  duration: 2000
});

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

$('.element').ripple({
  ease: 'cubic-bezier(.4,0,.2,1)'
});

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

$('.element').ripple({
  size: 2
});

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

$('.element').ripple({
  onclick: true
});

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

$('.element').ripple({
  type: 'pointed'
});

---

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