Attractive Ripple Effect on Click! Easy Setup and Customization Examples with jquery.rippleria.js

Web design greatly benefits from providing visual feedback in response to user actions, as it significantly enhances the user experience.
In this article, we’ll explain in detail how to display a beautiful ripple effect when clicking on buttons or images using jquery.rippleria.js. By implementing this technique, you can further boost the interactivity of your site.

Introducing jQuery Rippleria

jQuery Rippleria is a jQuery plugin designed to add ripple effects to elements. In this section, we’ll go through everything from the basic setup to customization methods.

CSS Description

Load the jquery.rippleria.min.css file. This CSS applies to buttons (.btn) and the image area (a tag).

<link rel="stylesheet" href="jquery.rippleria.min.css">
<style>
body {
  font-size: 14px;
  text-align: center;
  line-height: 2em;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 2em;
  padding: 15px 0 30px 0;
}
.btn {
    display: inline-block;
    margin: 0 5px 40px 5px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 30px 90px;
    text-transform: uppercase;
}
a{
  display: inline-block;
}
</style>

HTML Description

Prepare a button area (button tag) and an image area (id=”rippleria”) that will display the ripple effect when clicked.
Add data-rippleria to the button tag, and if you want to customize the ripple, configure the following options:
「Color: data-rippleria-color」「Ripple duration: data-rippleria-duration」「Easing: data-rippleria-easing」

<h1>A stylish ripple effect will appear when you click a button or an image.<br>Try clicking the buttons or the image below.</h1>

<button data-rippleria class="btn btn-primary">Dark Button</button>
<button data-rippleria class="btn btn-default">Light Button</button>
<button data-rippleria
data-rippleria-color="rgba(100,178,53,.35)"
data-rippleria-duration="1000"
data-rippleria-easing="cubic-bezier(0.680, -0.380, 0.385, 1.650)"
class="btn btn-default">Customized Button</button>

<a id="rippleria" href="#"><img src="1.jpg" alt="image"></a>

JavaScript Description

Load the jquery-2.1.4.min.js and jquery.rippleria.min.js files.
For the ripple effect after clicking the image (#rippleria), use $(‘image-area’).rippleria({options}).
Options include settings such as 「Ripple duration: duration」「Easing: easing」. Modify them as needed.

<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.rippleria.min.js"></script>
<script>
    $('#rippleria').rippleria({
        // animation speed
        duration: 750,
        // custom easing effect
        easing: 'ease-in'
    });

    $('#rippleria').click(function(e) {
        e.preventDefault();

        var randInt = function (min, max) {
        var rand = min + Math.random() * (max - min)
        rand = Math.round(rand);
        return rand;
    };

    $(this).rippleria('changeColor',
            'rgba('+randInt(0,200)+','+randInt(0,200)+','+randInt(0,200)+',0.'+randInt(3,5));
    });
</script>

Demo Page: Ripple Effect Expanding Stylishly When Clicking Buttons or Images Using jquery.rippleria.js

You can check out a demo page where you can actually experience these effects below.

Demo page showing a stylish ripple effect spreading when clicking buttons or images using jquery.rippleria.js

Source: jQuery Rippleria

jQuery Rippleria

Summary

In this article, we introduced how to implement a ripple effect triggered by click events using jquery.rippleria.js.
By using this plugin, you can easily add refined interactive elements to your website.
Experiment with different settings to find the style that best suits your site.

　
※ Please reuse at your own risk.
　Do not reuse the Google Analytics tag inside the <head> of the demo page.