Press "Enter" to skip to content

Ripple Effect Based on Material Design In jQuery | Ripple.js

Ripple effect is based on a material design made with CSS, JavaScript, jQuery selectors, and DOM manipulation for a very precise effect with respect to the original.

Powered by CSS animation and a bit of jQuery code. Easy to implement with CSS classes only.

forthebadge

ClassIt is made
ripple-effectAdds the effect to the component
ripples-lightChanges the color of the effect to its light version
ripples-dark (default)Changes the color of the effect to its dark version

How to make use of it:

1. Insert the jQuery library and the Ripple.js plugin’s files into the HTML doc.

<link rel="stylesheet" href="/path/to/ripples.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/ripples.js"></script>

2. Add the CSS class ripple-effect to the goal component and the plugin will handle the remaining.

<button class="ripple-effect">
  Ripple Effect
</button>

<div class="ripple-effect">
  Div element is supported as well
</div>

3. Change the theme to darkish utilizing the ripples-dark class.

<button class="ripple-effect ripples-dark">
  Ripple Effect
</button>

<div class="ripple-effect ripples-dark">
  Div element is supported as well
</div>

4. Customize the Material ripple impact by overriding the default CSS styles as proven below.

.ripple {
  background-color: rgba(255, 255, 255, 0.16);
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  -webkit-transition: .6s;
  transition: .6s;
  -webkit-animation: ripple 0.3s ease-out;
  animation: ripple 0.3s ease-out;
}

@-webkit-keyframes ripple {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes ripple {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

Material Ripple Effect In jQuery, Ripple effect Plugin/Github


See Demo And Download

Official Website(gabrielfins): Click Here

This superior jQuery/javascript plugin is developed by gabrielfins. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.