Simple Ripple Effect

The What

It is a simple jQuery and CSS3 code you can put on your WordPress theme or front end component to quickly implement ripple effect on various element.

How To Use

Simply load simple-ripple-effect.js and simple-ripple-effect.css then ripple effect will be applied to all element which has .ripple-effect class.

Here's how it looks. Try clicking it:

Here's the code:

<div class="box ripple-effect"></div>

Customization

There are few things that can be customized:

1. Flexible limit

By default, the dimension of the ripple effect mimics the dimension of the clicked area. However, there's a case where you'll want it to mimic the parent of the clicked element's dimension instead of the clicked element's dimension.

For example:

Here's the code:

<div class="box-wrapper">
    <div class="box ripple-effect" data-ripple-limit=".box-wrapper"></div>
</div>

2. Flexible Color

By default, the color of the ripple effect is rgba( 0, 0, 0, 0.3). You can change it using custom data attribute data-ripple-color="":

Here's the code:

<div class="box ripple-effect" data-ripple-color="#009688"></div>

3. Flexible Radius

You can implement border-radius by using data-ripple-wrap-radius="":

Here's the code:

<div class="box ripple-effect" data-ripple-color="#009688" data-ripple-wrap-radius="50%"></div>

4. Custom classes

If you need more customization, you can add custom classes to the ripple effect's wrapper to further modify your ripple effect's shape using CSS. Simply add data-ripple-wrap-class="" to the clicked element:

Simple Ripple Effect

by Abdifattah Abdillahi Mussa

The What

How To Use

Customization

1. Flexible limit

2. Flexible Color

3. Flexible Radius

4. Custom classes

simple ripple effect with pure css3