jQuery Pseudo Ripple

Intro

Material ripple plugin for jQuery web applications.

Examples are given below with code snippets.

Why?

Usual ripple plugin inserts an empty div / span element to render the ripple. This may cause bugs due to the following problems -

• addtion of unnecessary elements in the DOM
• element.innerHTML becomes different than expected when read
• can not set element.innerHTML without caution
• not easily append / prepend elements without causing positioning problems

This is where this plugin shines. It uses CSS pseudo ::after element for rendering the ripple. So this keeps the DOM and innerHTML clean.

As ripples are only for design, I think it is best to do this using CSS.

Simple use

// HTML
<div class="ripple-1">Hello Ripple</div>
// JS
$('.ripple-1').ripple()
			

Result

Styling with CSS

// HTML
<div class="ripple-2">Hello Color</div>
// css
.ripple-2::after {
  background: rgba(0,210,255,0.5);
}
// JS
$('.ripple-2').ripple()
			

Result

API usage

// HTML
<div class="ripple-3">API usage</div>
<div class="ripple-4">2x slow + on click</div>
<div class="ripple-5">Centered ripple</div>
<div><span class="ic ic-play type-icon"></span> Click icon</div>
<div class="type-trigger"><span class="ic ic-play"></span> <span>Click anywhere</span></div>
// JS
$('.ripple-3').ripple({
  ease: 'cubic-bezier(.4,0,.2,1)',
  duration: 2000, // default 400. could be ms in nummber or multiples of the default ('2x'|'3x'|'4x'|...|'10x')
  onclick: false, // if false, ripples on mousedown
  disable: false,
  type: 'pointed', // 'centered' | 'icon' | 'trigger' | 'target'
  size: 1, // integer upto 10. use greater than 1 for elements wihh greater height than width
})
$('.ripple-4').ripple({
  duration: '2x',
  onclick: true,
})
$('.ripple-5').ripple({
  type: 'centered',
})
$('.type-icon').ripple({
  type: 'icon',
})
$('.type-trigger').ripple({
  type: 'trigger',// ripples in .ripple-target element inside
})
			

Result

Consider compact

If you do not plan to use multiples for duration and size other than 1, you should use jquery-pseudo-ripple-compact.css instead of jquery-pseudo-ripple.css